vue 使用动态路由参数的 keep-alive 条件缓存与三级路由缓存解决

最近维护一个以前的vue项目，遇到个keep-alive的坑，特此记下。
需求是需要使用keep-alive缓存，由于缓存的页面过多会导致页面卡顿，因此需要启用条件缓存。并且有三级路由存在，也需要缓存。然而在项目中发现，三级路由无法缓存。

原因查找

经查找原因为：
1、项目使用动态渲染路由即使用vue-router的addRouter方法，路由数据的name和vue组件的name选项数据不规范。而使用条件缓存时，需要用到router-link的includes属性。刚开始没注意到includes包含的name规定，其实vue官方文档讲的很明确，includes包含的是vue组件的name选项值，如果匹配不到当前组件的name选项，会去匹配当前组件的父级组件name选项。对于使用动态路由渲染的项目来说，includes包含的数据肯定从路由数据中来，因此，若路由数据的name和组件选项的name值不一致，缓存肯定会失败

在这里插入图片描述

2、项目中使用了动态路径路由（/path/:id)，需要跟id路径参数做页面缓存，这时候router-link需要key属性，不然不生效。然而，使用了key属性，会造成keep-alive页面缓存失效

方案解决

清楚了原因，并且仔细阅读了keep-alive的官方api，那就好办了。
1、首先检查数据库返回的路由数据，检查name字段，确保有值并且值要规范（这里建议见名知意，并且和vue组件文件名称一致）
2、检查vue文件name选项，保持和路由数据的name字段一致
3、由于路由时动态渲染的，二级，三级路由都使用同一个容器文件渲染。当有三级路由需要缓存时，必须将路由容器组件加入includes中。这样三级路由缓存便可以生效

代码

代码就不上了，思路简单说下。
首先使用vuex存储router-link includes的值，这样方便更新。检查路由变化比如在全局路由前置守卫里面将路由数据的name添加到 includes 数据中。
其次。若有大量的三级路由，可手动直接将容器组件加到includes数据中，若比较少，可以判断是三级路由的时候判断数据里面有没有容器组件，没有则加入

结尾

最后想说的是，规范很重要。经常发现有些童鞋，文件名，组件名，路由名一团糟，不一致，甚至没有。