共计 2271 个字符，预计需要花费 6 分钟才能阅读完成。
用过 vue-element-admin 的同学肯定很分明，路由的配置间接关系侧边栏导航菜单的展现，也得益于这种设计思路，简直大部分后盾框架都采纳这个计划，当然也包含了我写的 Fantastic-admin 这个中后盾框架。
但这个计划有个显著的问题，就是为了实现多级侧边栏导航菜单，则须要将路由配置成多级嵌套的模式，一旦超过两级，达到三级甚至更多级，就须要减少一个空布局页面（Empty.vue）用来给 component 应用，仅仅是为了生成层级菜单。此时就呈现了一个问题，因为 keep-alive 是在 Layout 上解决的，所以超过两级以上的路由都会变得难以解决，也没有一个绝对完满的解决方案。
在思考并解决这个问题之前，咱们先来看下页面大抵构造：
+------------------------------+
| Layout |
| +------------------------+ |
| | Empty | |
| | +------------------+ | |
| | | Page | | |
| | +------------------+ | |
| +------------------------+ |
+------------------------------+首先 keep-alive 是在 Layout 上进行解决，如果不缓存 Empty，则 Empty 上面的页面将无奈被缓存，如果缓存 Empty，又会导致 Empty 外面的所有页面都被缓存，无奈按需革除，置信接触过的同学必定感同身受其中的大坑。
解决思路
其实有一个绝对清晰简略的解决思路，既然缓存二级路由是没问题，而超过二级的两头层级页面也是没太大意义的，那为什么不将路由间接解决成二级，这样页面显示也就是二级的构造。
+------------------------------+ +------------------------------+
| Layout | | Layout.vue |
| +------------------------+ | | +------------------------+ |
| | Empty | | +----------> | | Page | |
| | +------------------+ | | | | | |
| | | Page | | | | | | |
| | +------------------+ | | | | | |
| +------------------------+ | | +------------------------+ |
+------------------------------+ +------------------------------+这里须要留神，路由配置还是放弃多级嵌套的模式，而这个配置并非最终注册应用的路由，仅仅是提供侧边栏导航菜单应用，同时再生成一份用于动静注册路由的数据，图例如果没看明确的话，能够看上面两组数据。
// 原始数据（用于侧边栏导航菜单）{
path: '/users',
meta: {title: '用户治理'},
children: [
{
path: 'clients',
meta: {title: '客户治理'},
children: [
{
path: 'list',
meta: {title: '客户列表'}
},
{
path: 'detail',
meta: {title: '客户详情'}
}
]
}
]
}
// 解决后数据（用于动静注册路由）{
path: '/users',
meta: {title: '用户治理'},
children: [
{
path: 'clients/list',
meta: {title: '客户列表'}
},
{
path: 'clients/detail',
meta: {title: '客户详情'}
}
]
}通过一个递归函数就能够解决好路由的数据，但这还不够，因为还须要解决面包屑导航。
原有的面包屑导航是通过 $route.matched 能够获取到嵌套路由每一层级的信息，而当路由被解决成两级后，也就无奈通过 $route.matched 进行显示了，所以在解决路由数据的同时，也须要解决面包屑导航的信息。大抵最终会解决成这样：
{
path: '/users',
meta: {title: '用户治理'},
children: [
{
path: 'clients/list',
meta: {
title: '客户列表',
breadCrumb: [{ path: '/users', title: '用户治理'},
{path: 'clients', title: '客户治理'},
{path: 'list', title: '客户列表'}
]
}
},
{
path: 'clients/detail',
meta: {
title: '客户详情',
breadCrumb: [{ path: '/users', title: '用户治理'},
{path: 'clients', title: '客户治理'},
{path: 'detail', title: '客户详情'}
]
}
}
]
} 这样一来，通过 $route.meta.breadcrumb 就能够获取任意某个路由的残缺面包屑导航信息了。最终成果如下：
通过图片能够看到，这种计划也还是有肯定的限度，就是路由被解决成二级后，多级嵌套关系不存在了，也就是不能在 Empty 里写任何代码，因为都会被疏忽掉，只保留顶级和最深层的底级两个路由。
当然通过理论状况思考，这种限度并没有大问题，因为在后盾零碎里，自身模块绝对独立，即使侧边栏导航菜单是嵌套层级关系的，在右侧内容展现区域，简直都是独立模块展现，无需嵌套。
实例代码
本文次要是探讨实现思路，相干代码可在 Fantastic-admin 里查看，外围代码在这，点击查看。
