vue+Vue Router多級側(cè)導(dǎo)航切換路由(頁面)的實(shí)現(xiàn)代碼

更新時間：2018年12月20日 09:06:21 作者：張一井

這篇文章主要介紹了vue+Vue Router多級側(cè)導(dǎo)航切換路由(頁面)的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

當(dāng)當(dāng)當(dāng)當(dāng)當(dāng)~我又來了。

在項目里經(jīng)常會遇到側(cè)導(dǎo)航切換頁面的功能。

如果我們將側(cè)導(dǎo)航做成公共組件，來調(diào)用的話，就會在每一個頁面都引用該組件，在后期維護(hù)的時候比較麻煩，比如改參數(shù)。

所以此文將側(cè)導(dǎo)航做成父頁面組件，將切換的頁面做成子頁面，這樣只需調(diào)用一次即可。大大減少了后期維護(hù)的麻煩

涉及功能點(diǎn)

側(cè)導(dǎo)航支持多級

Vue Router的使用方法（官方文檔）

子父組件的寫法

樣式：elementUI

效果圖

實(shí)現(xiàn)

--- 目錄結(jié)構(gòu)

--- Vue Router的使用方法

首先安裝 npm install vue-router 。

然后在 main.js 中引入

import router from './router'

new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

--- vue頁面使用Vue Router

在 App.vue 里引用 router-view 。

router-view 就相當(dāng)于一個容器，來渲染我們定義的路由

<template>
 <div id="app">
  <router-view></router-view>
 </div>
</template>

最好不要在 App.vue 里寫太多內(nèi)容，把它作為祖父級展示就可以啦，能預(yù)防新手使用的一些未知錯誤，如打包出錯之類的。

所以，我在在 App.vue 里引用 router-view 只渲染根頁面，而 components/page 下新建了一個 index.vue 頁面，用來放側(cè)導(dǎo)航和渲染子頁面

<template>
  <div>
    <!--v-sidebar是側(cè)導(dǎo)航-->
    <v-sidebar ></v-sidebar>
    <div class="content" :style="{height: (this.$store.state.bodyHeight-20) + 'px',overflow:'auto'}">
     <div></div>
      <transition name="move" mode="out-in">
      <!--這里的router-view用來渲染子頁面-->
      <router-view></router-view>  
      </transition>
    </div>
  </div>
</template>
<script>
 //引入側(cè)導(dǎo)航組件
  import vSidebar from '../common/sideMenu.vue';
  export default {
    data() {
      return {}
    },
    components:{
     //注冊側(cè)導(dǎo)航組件
      vSidebar
    },
  }
</script>

到此整個側(cè)導(dǎo)航切換路由的頁面結(jié)構(gòu)已經(jīng)完成了

如果你想了解，怎么實(shí)現(xiàn)多級導(dǎo)航，那么可以繼續(xù)向下看~

我將路由都提出來寫在了單獨(dú)的文件里，這樣方便統(tǒng)一維護(hù)管理

在 router 的 index.js 將頁面路由的名字和引用路徑都寫好

import Router from 'vue-router';
Vue.use(Router);
export default new Router(
 {
  routes: [
   {
    path: '/',
    name: 'main', component: main,
    children: [
     {
      path: '/inputDisabled',
      component: resolve => require(['../components/page/input/index.vue'], resolve),
      meta: {title: '禁止輸入'},
     },
     {
      path: '/indexSelect',
      component: resolve => require(['../components/page/input/indexSelect.vue'], resolve),
      meta: {title: 'select聯(lián)動'},
     },
     {
      path: '/loadMoreUp',
      component: resolve => require(['../components/page/loadMore/loadMoreUp.vue'], resolve),
      meta: {title: '下拉刷新'},
     },
    ],
   },
  ]
 })

--- 側(cè)導(dǎo)航來啦~

我用的是elementUI里的導(dǎo)航插件。

注意

菜單數(shù)據(jù)結(jié)構(gòu)，我這里寫的是嵌套結(jié)構(gòu)，父級套子級。

而不是并級，用標(biāo)識來區(qū)分。

代碼思路就是循環(huán)套循環(huán)

<template>
 <div class="sidebar">
  <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" unique-opened router
       collapse-transition>
   <template v-for="item in items" v-cloak>
    <template v-if="item.subset.length!==0">
     <el-submenu :index="item.url" :key="item.url">
      <template slot="title">
       <!--<img :src="item.icon" style="width: 20px;height: 20px"/>-->
       <span slot="title">{{ item.name }}</span>
      </template>
      <el-menu-item v-for="(subItem,i) in item.subset" :key="i" :index="subItem.url">
       <!--<img :src="subItem.icon" style="width: 20px;height: 20px"/>-->
       <span slot="title">{{ subItem.name }}</span>
      </el-menu-item>
     </el-submenu>
    </template>
    <template v-else>
     <el-menu-item :index="item.url" :key="item.url">
      <!--<img :src="item.icon" style="width: 20px;height: 20px"/>-->
      <span slot="title">{{ item.name }}</span>
     </el-menu-item>
    </template>
   </template>
  </el-menu>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    collapse: false,
    items: [{
     name: "elementUI之input",
     url: "",
     subset: [
      {name: "禁止輸入", url: "/inputDisabled", subset: []},
      { name: "select聯(lián)動", url: "/indexSelect", subset: []
     }]
    }, {name: "手機(jī)下拉刷新", url: "/loadMoreUp", subset: []}]
   }
  },
  computed: {
   onRoutes() {
    //當(dāng)前激活菜單的 index
    return this.$route.path.replace('/', '');
   }
  },
 }
</script>

OK 大功告成~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: