vue+element三级动态侧边栏

最近一直在做后台管理的项目，侧边栏肯定是少不了的，一般比较大型的项目侧边栏肯定不是一级二级就能搞定的，去年开发的时候就涉及到了四级动态菜单研究了好久才渲染折叠才可以，但没有记笔记，所以再次开发的时候又想不起来了，呜呜呜~~~所以今天就做个笔记了方便日后查看

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"

                                },

                            ]

                        }

                    ]

                }

        ]

    }

}