redirect路由配置 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组件代码如下：

编辑整理丨Mmm