keep-alive 缓存失效 vue-element-admin 根据后台动态路由缓存多级菜单

1.include

今天用vue-element-admin搭建后台框架，发现其使用keep-alive来缓存路由组件，缓存组件输入内容和查询结果。后来我去测试，发现没有起到作用。查看代码，按需缓存逻辑没有错误，router上的name也是正确。于是产生疑惑，这是什么神奇的bug。

切记！include配置的name，是组件的name，而不是router上的name！ 切记！include配置的name，是组件的name，而不是router上的name！ 切记！include配置的name，是组件的name，而不是router上的name！ ————————————————

2.还有一种情况导致 include配置失效 再嵌套多层级router-view情况下一二级菜单生效,三级以下都不生效(注意此方法是缓存所有三级菜单如果要动态缓存请看第三种解决方式)

解决方式如下:在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了

1. 创建一个空模板引用appMain
2. 在缓存中加入 ParentView 空模板组件名
3. 多级菜单情况下引用空模板渲染

3.根据后台返回字段动态配置三级菜单缓存

二三级菜单不能缓存本质是ParentView route-view没有找到导致不能被keep-live缓存,所有我们可以在全局路由守卫中直接找到ParentView路由并删除

if (to.matched && to.matched.length > 2) { to.matched.forEach((item, index) => { if (item.components.default.name === 'ParentView') { to.matched.splice(index, 1) } }) }