elementui 搭建布局页面路由_vue+elementui搭建后台管理界面(5递归生成侧栏路由)

有一个菜单树，顶层菜单下面有多个子菜单，子菜单下还有子菜单。。。

这时候就要用递归处理

1 定义多级菜单

修改 src/router/index.js 的 / 路由

{

path: ‘/‘,

redirect: ‘/dashboard‘,

name: ‘Container‘,

component: Container,

children: [

{path: ‘dashboard‘, name: ‘首页‘, component: Dashboard,

children: [

{path: ‘dashboard1‘, name: ‘首页1‘, component: Dashboard,},

{path: ‘dashboard2‘, name: ‘首页2‘, component: Dashboard,

children: [

{path: ‘dashboard21‘, name: ‘首页21‘, component: Dashboard,},

{path: ‘dashboard22‘, name: ‘首页22‘, component: Dashboard, },

] },

]

},

{path: ‘article‘, name: ‘文章‘, component: Article, },

]

}

2 抽出Sidebar组件

生成的递归路由放在侧边栏，因此抽取 sidebar 组件，sidebar 包含logo和 递归路由

再抽取 SidebarItem 为单独的路由组件，方便递归调用

2.1 Sidebar

Sidebar 接收collapse