vue-路由精講 - 二級路由和三級路由

1.我們繼續上一個案例 vue -- 路由精講制作導航 -- 從無到有 ，在 about文件夾下 創建一些文件夾。如下：

 

 

2.  編寫about.vue代碼。當我們點擊導航中 “關於我們” ，就會顯示該部分內容。代碼中寫了四個可供點擊后可以跳轉的模塊。和   <router-view></router-view> 表示你點擊了哪個組件，哪個組件就會渲染到這里來。

其中注意：css樣式,我們直接引入bootstrap中的導航的樣式，在標簽中直接添加class屬性的值就可以了。

about.vue代碼

<template>
    <div>
        <div class="row mb-5">   //row 代表行， mb-5 表示margin-bottom距離下面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">  //8列
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

 

3.配置二級路由和三級路由

注意：我們要在about頁面下添加四個路由，用到 children 屬性,  而且還用到 redirect 屬性，默認跳轉到指定路由，具體操作看代碼和注釋。

main.js代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import Menu from './components/Menu.vue'
import Admin from './components/Admin.vue'
import About from './components/about/About.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue'

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

//三級路由
import Phone from './components/about/contact/Phone.vue'
import PersonName from './components/about/contact/PersonName.vue'




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', redirect:'/about/contact', component:About, children:[            
　　　　　　　　　　　　　　　　　　　　　　　//表示about頁面中默認跳轉到/about/contact 這個路由頁面下。 31         {path:'/about/contact', name:'contactLink', redirect:'/personName', component:Contact, children:[
　　　　　　　　　　　　　　　　　　　　　　　//在/about/contact頁面中默認展現三級路由personName 的內容。 32             {path:'/phone', name:"phoneNumber", component:Phone},
            {path:'/personName', name:"personName", component:PersonName},
        ]},
        {path:'/history',name:'historyLink',component:History},
        {path:'/delivery',name:'deliveryLink',component:Delivery},
        {path:'/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({
  el: '#app',
  router,
  render: h => h(App)
})

 

 

Contact.vue代碼

<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">[e-mail]</p>

            <router-link :to="{name:'phoneNumber'}">電話</router-link>
            <router-link :to="{name:'personName'}">聯系人</router-link>

            <router-view></router-view>
        </div>
    </div>
</template>

 

Delivery.vue代碼

<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">[e-mail]</p>
        </div>
    </div>
</template>

 

History.vue代碼

<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">[e-mail]</p>
        </div>
    </div>
</template>

OrderingGuide.vue代碼

<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">[e-mail]</p>
        </div>
    </div>
</template>

Phone.vue代碼

 <template> <h1>400040040404404</h1> </template> 

PersonName.vue代碼

 <template> <h1>小劭</h1> </template>