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、路由数组，同时引入 SidebarItem 组件

子组件传入:

• barIdx: 当前路由的索引，用来定位子菜单
• subroute: 路由对象
• fatherpath: 父路径，如 /、 /a/b

2.2 SidebarItem

SidebarItem 接收路由、父路由path、父级idx，然后递归调用自身

3 项目结构

此时 src 的目录结构

│  App.vue
│  main.js
├─assets
│      logo.png
├─components
│      HelloWorld.vue
│      Sidebar.vue
│      SidebarItem.vue
├─container
│      Container.vue
├─router
│      index.js
├─styles
│      index.scss
└─views
    │  TheLogin.vue
    ├─article
    │      index.vue
    └─dashboard
            index.vue

4 修改容器配置

src/container/Container.vue 引入 Sidebar 组件

页面效果

转载于:https://www.cnblogs.com/wbjxxzx/p/9977220.html