Code analysis of secondary routing and third-level routing in vue.js

The content of this article is about the code analysis of secondary routing and third-level routing in vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why use secondary and tertiary routing?

When there are multiple in the project, hierarchical routing must be used;

If the routing is not hierarchical and there are multiple , all of them are is defined as a first-level route, then the content display of in the project will be confusing; this is unfriendly;

If the route is hierarchical, then when a certain second-level or In the third-level routing, this route will pass the corresponding component content to the in its parent routing component, so that there will be no confusion;

When the first-level routing is triggered, naturally You will find the

secondary route of the root component you registered

Add a children attribute array to the first-level route and put the second-level route;

The path attribute determines the display of the url address bar after the jump

//main.js
//一级路由
import About from './components/about/About'


//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'

const router= new VueRouter({
  routes:[
    {path:'/about',name:'about',component:About,children:[
        {path:'/about/contsssssssssssssssact',name:'contactLink',component:Contact},
        {path:'/history',name:'historyLink',component:History},
        {path:'/',name:'deliveryLink',component:Delivery},
        {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide},
      ]},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

Three-level routing

and second-level routing Routing is almost the same

const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},
    {path:'/menu',name:'menu',component:Menu},
    {path:'/admin',name:'admin',component:Admin},
    {path:'/about',name:'about',component:About,redirect: {name:'contactLink'},children:[   //二级路由
        {path:'/about/contact',name:'contactLink',component:Contact},
        {path:'/history',name:'historyLink',component:History},
        {path:'/delivery',name:'deliveryLink',component:Delivery},
        {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide,redirect:{name:'phonelink'},children: [  //三级路由
            {path:'/phone',name:'phonelink',component:Phone},
            {path:'/name',name:'namelink',component:Name}
          ]},
      ]},
    {path:'/login',name:'login',component:Login},
    {path:'/register',name:'register',component:Register},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

Related recommendations:

Summary of how to use Vue.js router (with code)

Router in vue.js Introduction to the configuration method

The above is the detailed content of Code analysis of secondary routing and third-level routing in vue.js. For more information, please follow other related articles on the PHP Chinese website!