</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"/>-->
