vue中keep-alive多级路由缓存问题
更新时间:2021年12月31日 14:45 点击:689 作者:宇少_Lxuan
1.问题描述
对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时,正常切换两个便捷页签时是可以正常缓存的,但删除最后一个页签时,此时另一个页签页面此时已经不缓存了。
2.原因分析
keep-alive默认支持缓存是两级,对三级及以上层级的页面缓存失效,之前的处理方式为: 监听到路由变化后,将当前的路由的标识及父级标识一起存起来,当多个页面存在时,关闭其中一个页面,也会将本身及父级的标识一起删掉,此时数组中已无父级标识,其他同级页面的缓存将失效。
3.解决思路
将路由配置表的所有路由拆成两个操作,一是保持原样用于菜单的展示,二是对路由配置表进行扁平化处理,将所有的路由处理成二级路由,这样keep-alive就能默认支持缓存了。
4.处理过程
拿到完整的路由配置
const modules = [] files.keys().forEach(key => { const filesObj = files(key).default || files(key) Object.keys(filesObj).forEach(keyOne => { modules.push(filesObj[keyOne]) }) })
操作完成路由配置
export const menuList = modules; // 用于菜单展示 const routerList = formatTwoStageRoutes(formatFlatteningRoutes(modules)); // 将路由扁平化为二级路由 const router = new VueRouter({ scrollBehavior: () => ({ y: 0 }), mode: 'history', base: process.env.BASE_URL, routes: routerList, // 在路由配置项中使用扁平化处理后的路由 })
扁平化方法
export const formatFlatteningRoutes =(routesList => { if (routesList.length <= 0) return routesList; let list = []; routesList.forEach(v => { if(v.path === '/') { // 用于添加初试layout和首页,其他各中心配置过滤掉layout及父节点,只保留children内路由 list.push(v); list = list.concat(formatFlatteningRoutes(v.children)) } else if (v.children && v.children.length > 0) { list = list.concat(formatFlatteningRoutes(v.children)) } else { list.push(v); } }) return list; }) export const formatTwoStageRoutes = list => { if (list.length <= 0) return list; const routerList = []; list.forEach(v => { if (v.path === '/') { routerList.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] }) } else if (v.path === '/login' || v.path === '/showcasePage') { // 不需要配置layout的页面 routerList.push(v) } else { routerList[0].children.push({ ...v }) } }) return routerList; }
到此这篇关于vue中keep-alive多级路由缓存问题的文章就介绍到这了,更多相关vue keep-alive多级路由缓存内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7046648136000864286
相关文章
vue中keep-alive、activated的探讨和使用详解
这篇文章主要介绍了vue中keep-alive、activated的探讨和使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26- 这篇文章主要介绍了Bootstrap多级导航栏的实现代码的相关资料,需要的朋友可以参考下...2016-03-10
- 这篇文章主要介绍了Vue中keep-alive的两种应用方式,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17
- 众所周知keep-alive是Vue提供的一个抽象组件,主要是用来对组件进行缓存,从而做到节省性能,这篇文章主要给大家介绍了关于vue中keep-alive组件用法的相关资料,需要的朋友可以参考下...2021-05-16
- 这篇文章主要介绍了IDEA 创建多级文件夹的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-18
- LRU算法全称为least recently use 最近最少使用,核心思路是最近被访问的以后被访问的概率会变高,那么可以把之前没被访问的进行删除,维持一个稳定的最大容量值,从而不会导致内存溢出。...2021-06-01
- 本文主要介绍了关于keep-alive路由多级嵌套不生效的解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2022-03-25
- 这篇文章主要介绍了vue中使用keep-alive动态删除已缓存组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-08-11
- 本文主要介绍了vue中keep-alive多级路由缓存问题,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-12-31
- 这篇文章主要介绍了Vue keep-alive的实现原理分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-04-15
- 这篇文章介绍了ASP.NETMVC获取多级类别组合下产品的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2022-09-14