注意:路由name同名并不会影响(三级路由)
动态设置方法
1.重构
import Cpn from 'xxx'
...
name: CacheRouterName
component: {
...Cpn,
name: CacheRouterName
}
...
2.异步加载
...
name: CacheRouterName,
component: async () => {
let cpn = await import('xxxx/index.vue');
cpn.default.name = CacheRouterName;
return cpn;
}
...
异步加载 返回Promise 且 属于CommonJS规范。
拓展
嵌套路由缓存失效
嵌套路由缓存
对于多级的嵌套路由需要把中间的层级加入
如 /A/B/C 三层 两个router-view
中间层为B,添加B.name
需要在 最上一层 keep-alive手动加入中间层B.name
详情见请浏览《keep-alive不能缓存多层级路由菜单问题》
ps:由于当时没搞清楚是哪个的问题 绕了好久,才发现需要先解决这个😂😂😂
思考
1.不同的二级路由存在存在的子路由具有相同的name貌似不影响缓存?同级路由下存在相同的name的子路由是否会影响缓存?