最近一直在做后臺管理的項(xiàng)目，側(cè)邊欄肯定是少不了的，一般比較大型的項(xiàng)目側(cè)邊欄肯定不是一級二級就能搞定的，去年開發(fā)的時(shí)候就涉及到了四級動(dòng)態(tài)菜單研究了好久才渲染折疊才可以，但沒有記筆記，所以再次開發(fā)的時(shí)候又想不起來了，嗚嗚嗚~~~所以今天就做個(gè)筆記了方便日后查看

1.router.js

{

? ? ? ? path:'/systemManage', name: "systemManage", meta: { requireAuth: true, title: '系統(tǒng)管理', 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: "系統(tǒng)管理",

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

????????]

? ? }

}