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

赞 (0)

相关推荐

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • 关于keep-alive路由多级嵌套不生效的解决方案

    关于keep-alive路由多级嵌套不生效的解决方案

    目录 问题 定位问题 解决方案 额外的问题及题解 问题 发现了一个问题,多级嵌套的路由缓存页面没有生效.网上其实有一些是把路由拍平,然后再去处理菜单,但是我觉得还不如从根源上去解决这个问题.顺带了解一下keep-alive的工作原理. 实际就是根据组件的名称,如果即将渲染的组件名称命中存在缓存数组,那么直接取缓存里的组件进行渲染.同时,这个命中缓存是带有父子组件关联关系的 以下会根据本图做讲解 定位问题 keep-alive实际就是根据组件的名称,如果即将渲染的组件名称命中存在缓存数组,那么直接

  • vue动态路由实现多级嵌套面包屑的思路与方法

    前言 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0

  • 详解angular2实现ng2-router 路由和嵌套路由

    实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

  • 基于layui table返回的值的多级嵌套的解决方法

    我在学习layui的过程中遇到了table返回值的问题,如果服务器端返回给你的数据是多级嵌套的话,那你在前台是解析不了的,在table.js源码中 它渲染数据是用了 data = res[options.response.dataName] || [] 这个意味着它源码不支持嵌套数据 举个例子把 比如服务器端返回的数据中data>dataList>list 把这个数据返回给前段解析出来的是 res[data.dataList.list]类似这种的结构,当然解析不了,所以我写了一个方法处理返回的

  • vue2.0使用v-for循环制作多级嵌套菜单栏

    使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了. 方法 <div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> <div class="level-two" v-if="obj1.parentId == obj.id

  • react-router-domV6版本的路由和嵌套路由写法详解

    目录 1-单级路由 2-嵌套路由(about路径进行嵌套) ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</NavLink> <Routes>   <Route path='/home' element={<Home/>}/>   <R

  • vue element el-form 多级嵌套验证的实现示例

    vue element el-form 多级嵌套验证的实现示例

    目录 方法一:el-form里面再嵌套一个el-form 方法二:直接把验证规则写在html中 最近在做项目时遇到这样一个需求,一个form表单里面有两个字段数量不固定,可以动态的增删,在提交的时候不管数量有多少都需要验证,页面效果如下: form表单对应的数据结构如下: voucherInfo: { cash: [ { cashNum: '', // 押金流水号 cashPayType: null, // 押金支付类型 } ], cashPayTime: '', // 押金支付时间 cashP

  • Vue异步组件处理路由组件加载状态的解决方案

    vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块,并且只在需要的时候才从服务器加载一个模块. 但是这种解决方案也有其问题,当网络环境较差时,我们去首次访问某个路由模块,由于加载该模块的资源需要一定的时间,那么该段时间内,我们的应用就会处于无响应的状态,

  • maven依赖版本没有按照最短路径原则生效的解决方案

    女朋友他们项目用了 spring-boot,以 spring-boot-parent 作为 parent: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.9</version> </parent> 女朋友最近想用 elast

随机推荐