vue-router多层嵌套+keep-alive

项目背景：使用vue-element-admin框架改造的项目，多层级路由。

目前想要：点击菜单是新拿数据；同一个菜单，从列表点进入详情后，如没有修改返回的时候不重新拿数据。此时需要用到的是keep-alive.经多方查证，keep-alive对于多层嵌套不起作用；需要手动将层级进行移除操作或者手动添加缓存。多次验证后发现移除层级对于本项目就破坏了结构。最后是只给最后一层路由设置keep-alive.之上的路由router-view中不加key.

路由机构：页面顶部的属于一级菜单；点击一级菜单后页面左侧展示该一级菜单下的二级菜单，页面结构如下：

路由设置如下：

路由层级设置如下

export const asyncRoutes = {
  path: '/',
  component: Layout,
  children: [
    {
      path: 'a',
      name: 'admin',
      meta: { title: '顶级菜单A', breadcrumb: false },
      component: PageView,
      children: [
        {
          path: 'dashboard',
          component: () => import('@/views/dashboard/index.vue'),
          name: 'Dashboard',
          meta: { title: '概览', icon: 'dashboard' }
        },
        {
          path: 'gateWay',
          redirect: '/api/gateWay/list',
          component: InnerPageView,
          meta: { title: '网关管理', icon: 'gateWay' },
          children: [
            {
              path: 'list',
              name: 'gatewayManageManage',
              component: () => import('@/views/gateway/ListIndex'),
              hidden: true,
              meta: { breadcrumb: false },
            },{
              path: 'init',
              component: () => import('@/views/gateway/init'),
              hidden: true,
              meta: { title: '导入' }
            },{
              path: 'create',
              component: () => import('@/views/gateway/GateWayDetail'),
              hidden: true,
              meta: { title: '详情' }
            },{
              path: 'detail/:id/:flag',
              component: () => import('@/views/gateway/GateWayDetail'),
              hidden: true,
              meta: { title: '详情' }
            }
          ]
        }
      ]
    },
    {
      path: 'b',
      name: 'b',
      meta: { title: '顶级菜单B', breadcrumb: false },
      component: PageView,
      children: [
        {
          path: 'users',
          component: () => import('@/views/OrgAndUsers/Users'),
          name: 'systemUserManageManage',
          meta: { title: '用户', icon: 'users' },
        },
        {
          path: 'organization',
          redirect: '/userpart/organization/list',
          component: PageView,
          name: 'systemGroupManage',
          meta: { title: '分组', icon: 'org' },
          children: [
            {
              path: 'list',
              component: () => import('@/views/OrgAndUsers/Organization'),
              name: 'systemGroupManageManage',
              hidden: true,
              meta: { title: '分组', breadcrumb: false }
            }, {
              path: 'config/:id',
              component: () => import('@/views/OrgAndUsers/components/SetPermission'),
              name: 'SetPermisson',
              hidden: true,
              meta: { title: '小组权限配置' }
            }
          ]
        },
        {
          path: 'roles',
          redirect: '/userpart/roles/list',
          component: PageView,
          meta: { title: '角色', keepAlive: true, id: 'user-server_systemRoleManage', icon: 'role'},
          children: [
            {
              path: 'list',
              component: () => import('@/views/OrgAndUsers/Roles'),
              hidden: true,
              name: 'systemRoleManageManage',
              meta: {title: '角色', breadcrumb: false}
            },{
              path: 'detail',
              component: () => import('@/views/OrgAndUsers/components/RoleDetail'),
              hidden: true,
              meta: { title: '角色配置' }
            },{
              path: 'detail/:id/:flag',
              component: () => import('@/views/OrgAndUsers/components/RoleDetail'),
              hidden: true,
              meta: { title: '角色配置' }
            }
          ]
        },
      ]
    }
  ]
}