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 這個路由頁面下。
    {path:'/about/contact',name:'contactLink',redirect:'/personName',component:Contact,children:[
　　　　　　　　　　　　　　　　　　　　　　　//在/about/contact頁面中預設展現三級路由personName 的內容。
      {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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</p>
    </div>
  </div>
</template>

Phone.vue程式碼

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

PersonName.vue程式碼

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

補充知識：vue：選單收縮功能

想要實現：點選選單能收縮。（效果如下：）

點選前：

點選後：

思路：

首先我們要知道紳縮的按鈕和選單是否在一個頁面。在一個頁面就簡單了。

如果不在一個頁面，就會涉級到父子級傳參，紳縮按鈕模組中要把狀態傳給header，這是兄弟間的傳遞引數，需要用到 vuex。如果不用vuex的話，就通過主體去操作。紳縮按鈕把狀態傳給主體是子傳父，通過 this.$emit()。主體把狀態傳給選單，是父傳子，通過props ，選單中需要接收主體中傳過來的東西，要在 data 中定義props 在裡面定義type、required、default。如果不清楚props 是啥，請百度。

操作：

1、先看整體佈局

2、menu 模組

3、header 模組

以上這篇vue-路由精講 二級路由和三級路由的作用就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。