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

            :default-active="ActiveIndex"

            :router="true"

            class="el-menu-demo"

            mode="vertical"

            :collapse="isOpen"

            @select="handleSelect"

            >

               

                   

                    {{ itme.name }}

               

               

                   

                   

                       

                        {{ itmes.name }}

                   

                   

                       

                       

                           

                            {{ items.name }}

                       

                     

               

           

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"

                                },

                            ]

                        }

                    ]

                }

        ]

    }

}