vue-路由精講二級路由和三級路由的作用

更新時間：2020年08月06日 10:50:37 作者：甘劭

這篇文章主要介紹了vue-路由精講二級路由和三級路由的作用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

2、編寫about.vue代碼。當我們點擊導航中 “關(guān)于我們” ，就會顯示該部分內(nèi)容。代碼中寫了四個可供點擊后可以跳轉(zhuǎn)的模塊。和 <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">聯(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>
      <!-- 導航所對應(yīng)的內(nèi)容 -->
      <div class="col-8"> //8列
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

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

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

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)

核心代碼二級路由和三級路由的跳轉(zhuǎn)

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頁面中默認跳轉(zhuǎn)到/about/contact 這個路由頁面下。
    {path:'/about/contact', name:'contactLink', redirect:'/personName', component:Contact, children:[
　　　　　　　　　　　　　　　　　　　　　　　//在/about/contact頁面中默認展現(xiàn)三級路由personName 的內(nèi)容。
      {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">聯(lián)系我們</div>
    <div class="card-body">
      <h4 class="card-title">聯(lián)系我們</h4>
      <p class="card-text">1623487989@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>

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">1623487989@qq.com</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">1623487989@qq.com</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">1623487989@qq.com</p>
    </div>
  </div>
</template>

Phone.vue代碼

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

PersonName.vue代碼

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

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

想要實現(xiàn)：點擊菜單能收縮。（效果如下：）

點擊前：

點擊后：

思路：

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

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

操作：

1、先看整體布局