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下面。
<template>
<div>
<div class="row mb-5">
<div class="col-4">
<!-- 导航 -->
<div class="list-group mb-5">
<router-link tag="li" class="nav-link" :to="{name:'historyLink'}">
<a class="list-group-item list-group-item-action">历史订单</a>
</router-link>
<router-link tag="li" class="nav-link" :to="{name:'contactLink'}">
<a class="list-group-item list-group-item-action">联系我们</a>
</router-link>
<router-link tag="li" class="nav-link" :to="{name:'orderingGuideLink'}">
<a class="list-group-item list-group-item-action">点餐文档</a>
</router-link>
<router-link tag="li" class="nav-link" :to="{name:'deliveryLink'}">
<a class="list-group-item list-group-item-action">快递信息</a>
</router-link>
</div>
</div>
<div class="col-8">
<!-- 导航所对应的内容 -->
<router-view></router-view>
</div>
</div>
</div>
</template>
<template>
<div class="card text-dark bg-light mb-3">
<div class="card-header">联系我们</div>
<div class="card-body">
<h4 class="card-title">联系我们</h4>
<p class="card-text">572404261@qq.com</p>
<router-link :to="{name:'phoneNumber'}">电话</router-link>
<router-link :to="{name:'personName'}">联系人</router-link>
<router-view></router-view>
</div>
</div>
</template>
