VueRouter 同组件多路由 根据动态设置组件name(缓存

注意：路由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的子路由是否会影响缓存？