vue-admin-element项目添加多级目录

需求：如下图，框架本身是提供多级菜单的渲染，不过当你点击的时候，右侧的内容显示就会出现混乱，变成嵌套的路由；

预期：左侧效果不变，右侧界面显示正常不要嵌套路由

实现：

1：在src/view目录下创建layout文件夹和index.vue文件，如图

代码：

<template>
  <router-view />
</template>

2：多级目录代码：显示出来效果即图一；

当出现多级目录时，没有路径的菜单用：

component: () =>import(@/views/layout/index),

具体router.js代码如下

{
    path: /18000,
    component: Layout,
    name: 18000,
    meta: {
      title: 系统运维,
      icon: el-icon-setting
    },
    children: [
      {
        path: /18100,
        component: () =>
          import(@/views/layout/index),
        name: 18100,
        meta: {
          title: 权限管理,
          icon: el-icon-s-check
        },
        children: [
          {
            path: /18110,
            component: () =>
              import(@/views/personnelManage/user/index),
            name: 18110,
            meta: {
              title: 用户管理,
              icon: el-icon-user,
              activeMenu: ,
             
            }
          },
          {
            path: /18120,
            component: () =>
              import(@/views/personnelManage/role/index),
            name: 18120,
            meta: {
              title: 角色管理,
              icon: el-icon-s-custom,
              activeMenu: ,
             
            }
          }
        ]
      }
    ]
  }

到此，多级目录修改完成，支持多级嵌套。