Project background: A modified project using the Vue-element-Admin framework, multi-tiered routing.

Current want: click menu is new data; The same menu, after entering details from the list point, if there is no modification, the data will not be retrieved. In this case, keep-alive is needed. After multiple checks, keep-alive has no effect on multi-layer nesting. You need to manually remove tiers or manually add caches. After repeated verification, it was found that removing the hierarchy broke the structure for this project. Finally, only keep-alive is set for the routes at the last layer. No key is added to the routes above the router-view.

Routing mechanism: the top of the page belongs to the first level menu; After clicking the level-1 menu, the level-2 menu under the level-1 menu is displayed on the left of the page. The page structure is as follows:

Route Settings are as follows:

The route level is set as follows

export const asyncRoutes = { path: '/', component: Layout, children: [ { path: 'a', name: 'admin', meta: { title: 'Breadcrumb ', Breadcrumb: false}, Component: PageView, children: [{path: 'dashboard', Component: () = > import (' @ / views/dashboard/index. The vue '), name: 'dashboard' meta: {title: 'overview' icon: 'dashboard'}}, {path: 'gateWay', Redirect: '/ API /gateWay/list', Component: InnerPageView, meta: {title: 'gateWay', 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: 'import'}}, {path: 'create' component: () = > import (' @ / views/gateway/GateWayDetail '), hidden: True, meta: {title: 'detail '}},{path: 'detail/:id/:flag', Component: () = > import (' @ / views/gateway/GateWayDetail '), hidden: true, meta: {title: 'details'}}}]]}, {path:' b ', name: 'b', meta: {title: 'b', breadcrumb: false}, Component: PageView, children: [{path: 'users', Component: () => import('@/views/OrgAndUsers/Users'), name: 'systemUserManageManage', meta: {title: 'user ', icon: 'users' }, }, { path: 'organization', redirect: '/userpart/organization/list', component: PageView, name: 'systemGroupManage', meta: {title: 'group ', icon: 'org'}, children: [{path: 'list', Component: () => import('@/views/OrgAndUsers/Organization'), name: 'systemGroupManageManage', hidden: true, meta: { title: 'Grouping ', breadcrumb: false}}, {path: 'config/:id', Component: () => import('@/views/OrgAndUsers/components/SetPermission'), name: 'SetPermisson', hidden: true, meta: { title: 'Roles'}}]}, {path: 'roles', redirect: '/ userPart /roles/list', Component: PageView, meta: {title: 'role', keepAlive: true, id: 'user-server_systemroleManage ', icon: 'role'}, children: [{path: 'list', Component: () => import('@/views/OrgAndUsers/Roles'), hidden: true, name: 'systemRoleManageManage', meta: {title: 'Role ', breadcrumb: false}},{path: 'detail', Component: () = > import (' @ / views/OrgAndUsers/components/RoleDetail '), hidden: true, meta: {title: 'the role configuration'}}, {path: 'detail/:id/:flag', component: () => import('@/views/OrgAndUsers/components/RoleDetail'), hidden: true, meta: { title: 'Role configuration'}}]},]}]}Copy the code