vue-element-admin头部快捷导航keep-alive缓存无效

公司的一个项目是基于vue-element-admin开发的，头部的快捷导航利用keep-alive可以做缓存处理，但是前提是路由的name和组件的name完全一致才能生效，还有就是该功能只能缓存到第二级，如果还有router-view则无法缓存这个组件，多层级的缓存需要把父和子组件的name都添加到include上，中间涉及边界太复杂就没有花时间尝试。

虽然没有完美的方案，但有一个折中全局缓存方案：在AppMain.vue中把<keep-alive :include="cachedViews">修改为<keep-alive :max="20">设置一个最大缓存数即可，但是没有了灵活性。

对于本公司项目，因为只需要缓存其中一个页面，需求就相对简单些，如果你的项目也只需要缓存个别页面，可以参考本方案。

以本项目为例，其中一个新增子页面需要缓存，直接使用keep-alive的include缓存组件无效，查找问题发现需要缓存的页面还嵌套了一层router-view。此时将这个router-view所在组件命名为parentPage，里面需要缓存的添加功能子页面命名为addPage，在第一个keep-alive中如下设置即可使缓存生效：

<keep-alive include="parentPage,addPage" :max="1">
	<router-view :key="key" />
</keep-alive>

但是这样会存在一个问题，parentPage父页面也缓存后就会导致内部子组件都会被缓存，其中有一个列表展示页面，新增数据后由于被缓存问题，当前列表不会被刷新，看不到最新添加的数据，这并不是我们希望的结果。这时可以取巧，如上代码设置max最大值为1，那么只要跳转到新增子页面了，那么父页面的缓存就会取消，那么此时回到列表页，列表也就对应刷新了，基本满足了实际需求。