vue+Vue Router多级侧导航切换路由(页面)的实现代码

import router from \'./router\'

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

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

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

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),
       : { : \'禁止输入\'},
     },
     {
      path: \'/indexSelect\',
      component: resolve => require([\'../components/page/input/indexSelect.vue\'], resolve),
       : { : \'select联动\'},
     },
     {
      path: \'/loadMoreUp\',
      component: resolve => require([\'../components/page/loadMore/loadMoreUp.vue\'], resolve),
       : { : \'下拉刷新\'},
     },
    ],
   },
  ]
 })

<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=\" \">
       <!--<img :src=\"item.icon\" style=\"width: 20px;height: 20px\"/>-->
       <span slot=\" \">{{ 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=\" \">{{ 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=\" \">{{ item.name }}</span>
     </el-menu-item>
    </template>
   </template>
  </el-menu>
 </div>
</template>

< >
 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(\'/\', \'\');
   }
  },
 }
</ >