关于keep-alive路由多级嵌套不生效的解决方案
问题
发现了一个问题，多级嵌套的路由缓存页面没有生效。网上其实有一些是把路由拍平，然后再去处理菜单，但是我觉得还不如从根源上去解决这个问题。顺带了解一下keep-alive的工作原理。 实际就是根据组件的名称，如果即将渲染的组件名称命中存在缓存数组，那么直接取缓存里的组件进行渲染。同时，这个命中缓存是带有父子组件关联关系的
以下会根据本图做讲解
定位问题
keep-alive实际就是根据组件的名称，如果即将渲染的组件名称命中存在缓存数组，那么直接取缓存里的组件进行渲染。也就是我们一个页面的渲染，是按一个一个组件来的，组件命中缓存则取缓存，如果没有缓存，则下面的子组件不再进行缓存命中的判断，从新渲染。
我们在路由上定义了name属性，以name和组件名称相对应的形式去判断路由跳转时当前组件是否销毁。实际上keep-alive就是根据组件名称去判断是否保活的，所以之所以多级路由没有生效的原因就显而易见了，多级路由我们有一个中间组件去作为路由容器，然而这个路由容器组件我们没有定义组件名，所以导致了没有办法缓存最后一层的组件。
也就是我们的layout还有wrapper/index.vue组件中没有定义名称，所以哪怕给keep-alive的include传递了Summary组件的名称，但是由于父级并没有找到，所以没办法在下次渲染时命中该组件的缓存。
解决方案
由问题定位可知，我们去一级一级添加组件名称不就ok了吗。 但是，就有一个问题出现了，layout还有wrapper/index.vue是多个组件复用的啊，这样不就会导致我所有的页面的中间组件都会被缓存起来了吗。
所以，我们动态组件名不就o了吗，所以我们就直接根据hash去取对应的路由值去赋值给组件名称赋值
额外的问题及题解
我们存在tab-view组件，可以关闭缓存页面，但是我们现在一个二级页面缓存的是两个组件，一个三级页面缓存的是三个组件，而且相同父级的还共同依赖父级组件，也就是实际缓存summary和fabInventory两个页面时，是缓存了Inventory，InventoryManagement，summary和fabInventory四个组件，所以清除掉summary时，你还要考虑是否他有兄弟路由被缓存，如果存在则父级别缓存，这是个往上递归的判断
到此这篇关于关于keep-alive路由多级嵌套不生效的解决方案的文章就介绍到这了,更多相关keep-alive路由多级嵌套不生效内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
原文出处：https://juejin.cn/post/7072300861505929223
相关文章
- 这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06
解决vue动态路由异步加载import组件,加载不到module的问题
这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-06-27
- 这篇文章主要介绍了vue-router路由参数刷新消失的问题...2017-06-24
vue中keep-alive、activated的探讨和使用详解
这篇文章主要介绍了vue中keep-alive、activated的探讨和使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26- 这篇文章主要介绍了vue-router为激活的路由设置样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18
- 这篇文章主要介绍了Vue鼠标滚轮滚动切换路由效果的实现方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-04
- 这篇文章主要介绍了springboot中nacos动态路由的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-11
- 这篇文章主要介绍了react自动化构建路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
原创powershell脚本小工具ctracert.ps1跟踪路由(win8以上系统)
这篇文章主要介绍了原创powershell脚本小工具ctracert.ps1跟踪路由(win8以上系统),需要的朋友可以参考下...2020-06-30- 这篇文章主要介绍了vue路由分文件拆分管理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-13
- 这篇文章主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要介绍了Vue中keep-alive的两种应用方式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
MVC默认路由实现分页（PagerExtend.dll下载）
这篇文章主要介绍了MVC默认路由实现分页，采用bootstrap的样式，文末提供了PagerExtend.dll下载地址，感兴趣的小伙伴们可以参考一下...2021-09-22- 这篇文章主要介绍了如何制作自己的原生JavaScript路由，对路由感兴趣的同学，可以参考下...2021-05-04
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
这篇文章主要介绍了AngularJS实现用户登录状态判断的方法,通过Model添加拦截过滤器,路由增加限制实现针对登陆状态的判断功能,需要的朋友可以参考下...2017-01-09解读ASP.NET 5 & MVC6系列教程（11）：Routing路由
这篇文章主要介绍了ASP.NET 5 Routing路由的用法，虽然ASP.NET 5 和MVC6的路由使用方式很简单，但是相关的使用规则却很复杂，大家使用的时候需要多加注意。...2021-09-22- 这篇文章主要给大家介绍了关于vue实现路由懒加载的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-02