关于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路由多级嵌套不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论