当当当当当~我又来了。

在项目里经常会遇到侧导航切换页面的功能。

如果我们将侧导航做成公共组件，来调用的话，就会在每一个页面都引用该组件，在后期维护的时候比较麻烦，比如改参数。

所以此文将侧导航做成父页面组件，将切换的页面做成子页面，这样只需调用一次即可。大大减少了后期维护的麻烦

涉及功能点

• 侧导航支持多级
• Vue Router的使用方法（官方文档）
• 子父组件的写法
• 样式：elementUI

效果图

12-19-10_30_14.gif

实现

--- 目录结构

TIM截图20181219104229.png

--- 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就相当于一个容器，来渲染我们定义的路由

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

最好不要在App.vue里写太多内容，把它作为祖父级展示就可以啦，能预防新手使用的一些未知错误，如打包出错之类的。

所以，我在在App.vue里引用router-view只渲染根页面，而components/page下新建了一个index.vue页面，用来放侧导航和渲染子页面

<template>
   <div>
       <!--v-sidebar是侧导航-->
       <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>
 //引入侧导航组件
   import vSidebar from '../common/sideMenu.vue';
   export default {
       data() {
           return {}
       },
       components:{
         //注册侧导航组件
           vSidebar
       },
   }
</script>

到此整个侧导航切换路由的页面结构已经完成了

如果你想了解，怎么实现多级导航，那么可以继续向下看~

我将路由都提出来写在了单独的文件里，这样方便统一维护管理
在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联动'},
          },
          {
            path: '/loadMoreUp',
            component: resolve => require(['../components/page/loadMore/loadMoreUp.vue'], resolve),
            meta: {title: '下拉刷新'},
          },
        ],
      },
    ]
  })

--- 侧导航来啦~
我用的是elementUI里的导航插件。

注意
菜单数据结构，我这里写的是嵌套结构，父级套子级。
而不是并级，用标识来区分。

代码思路就是循环套循环

<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联动", url: "/indexSelect",  subset: []
          }]
        }, {name: "手机下拉刷新", url: "/loadMoreUp", subset: []}]
      }
    },
    computed: {
      onRoutes() {
        //当前激活菜单的 index
        return this.$route.path.replace('/', '');
      }
    },
  }
</script>

OK 大功告成~
欢迎交流和指正~~

喜欢你就点点赞，哈哈哈哈哈哈哈