1. main.js文件下二級路由和三級路由的引入枪芒，以及如何定義他們的路徑path边坤、名稱name、調(diào)用組件component讼稚、默認展示組件redirect括儒。
- 路由對象數(shù)組routes中存放著所有路由的路徑和組件绕沈。在這里二級路由，以children數(shù)組的形式掛在一級路由對象里面帮寻，如下所示乍狐。
- 三級路由也掛在二級路由對象中的children數(shù)組里面。
- 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">聯(lián)系我們</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">
<!-- 導航所對應的內(nèi)容 -->
<router-view></router-view>
</div>
</div>
</div>
</template>
<template>
<div class="card text-dark bg-light mb-3">
<div class="card-header">聯(lián)系我們</div>
<div class="card-body">
<h4 class="card-title">聯(lián)系我們</h4>
<p class="card-text">572404261@qq.com</p>
<router-link :to="{name:'phoneNumber'}">電話</router-link>
<router-link :to="{name:'personName'}">聯(lián)系人</router-link>
<router-view></router-view>
</div>
</div>
</template>
