详解vue-template-admin三级路由无法缓存的解决方案_vue多级路由缓存,vue三级路由缓存 - CSDN文库

5星 · 超过95%的资源 98 浏览量更新于2023-03-16 评论 1 收藏 67KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解详解vue-template-admin三级路由无法缓存的解决方案三级路由无法缓存的解决方案

1. 为什么三级会缓存不了为什么三级会缓存不了

在src/layout/AppMain组件:

keep-alive的组件依赖cachedViews,cachedViews是store中的一个状态，cachedViews的逻辑在src/layout/TagView

当路由变更时就会调用addViewTags,addViewTag会根据匹配的路由name属性进行缓存。而用到三级路由的时候，拿到name

只能时第三级路由的name，二级路由组件的名字会丢失，keep-alive就不会进行缓存。

知道原因之后，第一个想法就是把二级路由的name也加上去就好了。要实现这个也很简单，只需要获取到matched属性就可

以拿到匹配到的路由组件，把它加入到cachedViews数组就好了。但是有个问题就是，假设这里有个二级路由1-1，三级路由

1-1-1，1-1-2，当要关掉1-1-1组件时，你到底要不要把1-1给删了，如果删了，缓存能顺利失效，但是如果你之前是打开了1-

1-2，缓存的路由就会失效，因为它是依赖1-1的。如果不删的话，在侧边栏打开1-1-1的链接的时候，它又会重新复用回原本

的组件。

2 把三级（概念上的）转化为二级（真实）把三级（概念上的）转化为二级（真实）

在这里想来，如果1-1-1，1-1-2，其实只是因为分在同类别里，两者如果没有实际共享的数据，那可以考虑把1-1的路由组件

关掉，在我实践的项目就是如此，1-1-1和1-1-2只是同属在二级菜单下，并没有共享数据。但是生成菜单的时候是用router表

的，那么生成菜单的用原本的，生成路由的时候用替换的。

下面是demo代码：

将要被替换的路由加上noCompoent属性。

function delteFakeParent(router,prefix) {

var newRouter = { ...router }

if(prefix){

newRouter.path = prefix + '/' + router.path

}

if (!router.children) return newRouter

var children = [] if (router.noCompoent) {

for (let i = 0; i < router.children.length; i++) {

const item = delteFakeParent(router.children[i], newRouter.path)

if (Array.isArray(item)) {

item.forEach(el => {

children.push(el)

})

}else{

children.push(item)

}

}

newRouter = children

} else {

for (let i = 0; i < router.children.length; i++) {

const item = delteFakeParent(router.children[i])

if (Array.isArray(item)) {

item.forEach(el => {

children.push(el)

})

}

}

newRouter.children = children

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

甜甜不加糖

2023-06-18

推荐给其他人阅读。

weixin_38674512

粉丝: 0
资源: 889

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈