VueRouter 同组件多路由 根据动态设置组件name(缓存用)
注意:路由name同名并不会影响(三级路由)1.重构2.异步加载异步加载 返回Promise 且 属于CommonJS规范。嵌套路由缓存失效嵌套路由缓存对于多级的嵌套路由需要把中间的层级加入如 /A/B/C 三层 两个router-view中间层为B,添加B.name需要在 最上一层 keep-alive手动加入中间层B.name详情见请浏览《keep-alive不能缓存多层级路由菜单问题》ps:
·
注意:路由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的子路由是否会影响缓存?
作者:LeungJhowe
链接:https://www.jianshu.com/p/e286a8e75299
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
更多推荐
已为社区贡献36条内容
所有评论(0)