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

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是側(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>

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: '下拉刷新'},
 },
 ],
 },
 ]
 })

<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: "手機下拉刷新", url: "/loadMoreUp", subset: []}]
 }
 },
 computed: {
 onRoutes() {
 //當(dāng)前激活菜單的 index
 return this.$route.path.replace('/', '');
 }
 },
 }
</script>