最近一直在做后台管理的项目，侧边栏肯定是少不了的，一般比较大型的项目侧边栏肯定不是一级二级就能搞定的，去年开发的时候就涉及到了四级动态菜单研究了好久才渲染折叠才可以，但没有记笔记，所以再次开发的时候又想不起来了，呜呜呜~~~所以今天就做个笔记了方便日后查看
1.router.js
{
path:'/systemManage', name: "systemManage", meta: { requireAuth: true, title: '系统管理', icon: ''}, component: () => import('@/views/system/index.vue'),
children:[
{ path: '/colony', name: "colony",redirect: '/namespace', meta: { requireAuth: true, title: '集群', icon: ''}, component: () => import('@/views/system/colony/index.vue'),
children:[
{ path: '/namespace', name: "namespace", meta: { requireAuth: true, title: '命名空间', icon: ''}, component: () => import('@/views/system/colony/namespace.vue') }
]
},
2.navigate.vue
<el-menu
:default-active="ActiveIndex"
:router="true"
class="el-menu-demo"
mode="vertical"
:collapse="isOpen"
@select="handleSelect"
>
<el-menu-item :index="itme.PTo" v-if="!itme.children" v-for="(itme, index) in Path" :key="index">
<i :class="itme.icon"></i>
<span>{{ itme.name }}</span>
</el-menu-item>
<el-submenu :index="itme.PTo" v-for="(itme, index) in Path" v-if="itme.children && itme.children.length>0" :key="index">
<template slot="title">
<i :class="itme.icon"></i>
<span>{{ itme.name }}</span>
</template>
<el-menu-item :index="itmes.PTo" v-for="(itmes, index) in itme.children" v-if="!itmes.children" :key="index">
<i :class="itmes.icon"></i>
<span>{{ itmes.name }}</span>
</el-menu-item>
<el-submenu :index="item.PTo" v-for="(item, index) in itme.children" v-if="item.children && item.children.length>0" :key="index">
<template slot="title">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</template>
<el-menu-item :index="items.PTo" v-for="(items, index) in item.children" :key="index">
<i :class="items.icon"></i>
<span>{{ items.name }}</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
data(){
return {
path:[{
indexPath: "4",
PTo: "/systemManage",
name: "系统管理",
icon: "el-icon-setting",
children:[
{
indexPath: "4-3",
PTo: "/colony",
name: "集群",
icon: "el-icon-reading",
children:[
{
indexPath: "4-3-1",
PTo: "/namespace",
name: "命名空间",
icon: "el-icon-house"
},
]
}
]
}
]
}
}
