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: '',
             
            }
          }
        ]
      }
    ]
  }

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