一劳永逸，基于keep-alive思想解决后台多级路由缓存问题，几乎大部分后台框架都采用这种方案，当然也包括我写的Fantastic-admin的中后台框架。但是这个方案有一个明显的问题，就是要实现多级侧边栏导航菜单，需要以多级嵌套的形式配置路由。一旦超过两层，达到三层或更多层，就需要添加一个空的布局页面（Empty.vue）用于组件，只是为了生成层级菜单。至此，一个问题就出现了，因为keep-alive是在Layout上处理的，所以超过两层的路由会变得不好处理，目前还没有比较完善的解决方案。在思考和解决这个问题之前，我们先看一下页面的大致结构：+-----------------------------+|布局||+------------------------+|||空||||+------------------+|||||页|||||+--------------------+|||+----------------------+|+--------------------------+首先在Layout上处理keep-alive。如果Empty没有被缓存，Empty下面的页面将不会被缓存。如果缓存了Empty，则Empty中的所有页面都会被缓存，不能按需清除。相信摸过的同学一定也有同感的大坑。解决方案其实有一个比较清晰和简单的解决方案。既然缓存二级路由没问题，而二级以外的中间级页面意义不大，那为什么不直接把路由处理成二级，这样页面显示的就是二级结构。+----------------------------++---------------------------+|布局||布局.vue||+------------------------+||+------------------------+|||空||+---------->||页||||+--------------------+|||||||||页|||||||||+------------------+|||||||+--------------------+||+---------------------+|+----------------------------++----------------------------+这里需要注意的是路由配置依然保持多级嵌套的Form，并且这个配置不是最终注册使用的路由，只是提供侧边栏导航菜单使用，同时生成动态注册路由的数据。不懂图例的可以看下面两组数据。//原始数据（用于侧边栏导航菜单）{path:'/users',meta:{title:'UserManagement'},children:[{path:'clients',meta:{title:'CustomerManagement''},children:[{path:'list',meta:{title:'CustomerList'}},{path:'detail',meta:{title:'CustomerDetails'}}]}]}//处理Post数据（用于动态注册路由）{path:'/users',meta:{title:'UserManagement'},children:[{path:'clients/list',meta:{title:'CustomerList'}},{path:'clients/detail',meta:{title:'customerdetails'}}]}可以通过递归函数处理路由数据，但这还不够，因为还需要处理面包屑导航。原来的面包屑导航可以通过$route.matched获取嵌套路由的每一层的信息，而当路由被处理成两层时，是无法通过$route.matched显示的，所以在处理路由的同时作为数据，面包屑导航信息也需要处理。它大致会这样结束：{path:'/users',meta:{title:'UserManagement'},children:[{path:'clients/list',meta:{title:'CustomerList',breadCrumb:[{path:'/users',title:'用户管理'},{path:'clients',title:'客户管理'},{path:'list',title:'客户列表'}]}},{path:'clients/detail',meta:{title:'客户详情',breadCrumb:[{path:'/users',title:'用户管理'},{path:'clients',title:'客户management'},{path:'detail',title:'客户详情'}]}}]}这样就可以通过$route.meta.breadcrumb获取任意一条路线完整的面包屑导航信息。最终效果如下：从图中可以看出，这个方案还是有一定的局限性的，就是路由处理成两级后，不存在多级嵌套关系，也就是没有代码可以写成Empty，因为会被Ignored，只保留最顶层和最深的底层路由。当然，考虑到实际情况，这个限制问题不大，因为在后台系统中，模块本身是相对独立的，即使侧边栏导航菜单嵌套分层，在内容上也几乎都是独立的模块右侧显示区域不嵌套显示。示例代码本文主要讨论实现思路。相关代码可以在Fantastic-admin中查看。核心代码在这里，点击查看。
