vue怎么嵌套多级路由页面打不开_Vue 路由嵌套 二级路由和三级路由

1. main.js文件下二级路由和三级路由的引入，以及如何定义他们的路径path、名称name、调用组件component、默认展示组件redirect。

路由对象数组routes中存放着所有路由的路径和组件。在这里二级路由，以children数组的形式挂在一级路由对象里面，如下所示。

三级路由也挂在二级路由对象中的children数组里面。

redirect挂在拥有二级路由的一级组件里表示，当我们打开这个一级路由时，默认展示redirect的路径值，也就是他其中一个二级路由。

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import Home from './components/Home'

import Menu from './components/Menu'

import Admin from './components/Admin'

import About from './components/about/About'

import Login from './components/Login'

import Register from './components/Register'

// 二级路由

import Contact from './components/about/Contact'

import Delivery from './components/about/Delivery'

import History from './components/about/History'

import OrderingGuide from './components/about/OrderingGuide'

//三级路由

import Phone from './components/about/contact/Phone'

import PersonName from './components/about/contact/PersonName'

Vue.use(VueRouter)

const routes = [

{path:'/',name:"homeLink",component:Home},

{path:'/menu',name:"menuLink",component:Menu},

{path:'/admin',name:"adminLink",component:Admin},

{path:'/about',name:"aboutLink",component:About,redirect:'/about/contact',children:[

{path:'/about/contact',name:"contactLink",redirect:'/about/contact/personname',component:Contact,children:[

{path:'/about/contact/phone',name:'phoneNumber',component:Phone},

{path:'/about/contact/personname',name:'personName',component:PersonName},

]},

{path:'/about/delivery',name:"deliveryLink",component:Delivery},

{path:'/about/history',name:"historyLink",component:History},

{path:'/about/orderingGuide',name:"orderingGuideLink",component:OrderingGuide},

]},

{path:'/login',name:"loginLink",component:Login},

{path:'/register',name:"registerLink",component:Register},

{path:'*',redirect:'/'},

];

const router = new VueRouter({

routes,

mode:"history"

})

new Vue({

router,

el: '#app',

render: h => h(App)

})

2. 如上所示，contact、delivery、history、orderingGuide二级路由挂在一级路由about下。phone、personname三级路由挂在二级路由contact下面。

about组件代码如下

历史订单

联系我们

点餐文档

快递信息

contact组件代码如下

联系我们

联系我们

[email protected]

电话

联系人