通过以上步骤,你应该能够成功地在Vue项目中实现keep-alive对三级路由的缓存功能。如果在实现过程中遇到任何问题,可以检查路由配置是否正确、每个路由组件是否都有唯一的name属性、以及keep-alive的include属性是否包含了需要缓存的视图名称。
引入routerHelper,createRouter时三级路由提升为两层 import { deepClone } from '@/utils'; import { createRouter, createWebHashHistory } from'vue-router';/** * 将多级路由转换为 2 级路由*/exportfunctionflatMultiLevelRoutes(routeModules) { const modules=deepClone(routeModules);for(let index = 0;...
以我自己的项目为例,最终将接口返回的动态路由利用 this.safe.$router.addRoutes(aRouter), 来进行路由的注册,那么我们就需要在注册之前,将树形结构的三级或更多级转换位二级路由; 具体的转换参考如下代码, 利用两个递归将中间的路由来过滤掉; functiongenerateFlatRoutes(accessRoutes) { let flatRoutes=[];for(let...
keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1、直接将路由扁平化配置,都放在一级或二级路由中 方案2、再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行。重点介绍方案2,因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通...
需求是需要使用keep-alive缓存,由于缓存的页面过多会导致页面卡顿,因此需要启用条件缓存。并且有三级路由存在,也需要缓存。然而在项目中发现,三级路由无法缓存。 原因查找 经查找原因为: 1、项目使用动态渲染路由即使用vue-router的addRouter方法,路由数据的name和vue组件的name选项数据不规范。而使用条件缓存时,需要用到...
使用vue-element-admin脚手架做系统时,一般系统的侧边栏都是有父级,子级,子子级,发现使用keep-alive,当三级以上的路由时,无法缓存页面?? 那首先要了解下keep-alive的作用是啥? 是用来对页面组件进行缓存不缓存的处理,拥有缓存页面组件,再次进入时,使用原来已经加载好的内容,可以大大的节省请求和渲染时间,是个好东...
vue 三级路由 三级路由设置,多级以此类推 一级页面,用keep-alive缓存二级页面 二级页面,用keep-alive缓存三级页面 代码 export default new Router({ routes: [ { path: '/', name: 'index', component: index, redirect: '/home', children: [
keep-alive默认支持缓存是两级,对三级及以上层级的页面缓存失效,之前的处理方式为: 监听到路由变化后,将当前的路由的标识及父级标识一起存起来,当多个页面存在时,关闭其中一个页面,也会将本身及父级的标识一起删掉,此时数组中已无父级标识,其他同级页面的缓存将失效。
在Vue-Element-Admin中,通常的做法是在App.vue文件中使用<keep-alive>来包裹<router-view>,这样所有路由页面都会被缓存。但这种方式并不能很好地处理三级路由的缓存问题,因为当三级路由页面被缓存时,如果父路由发生变化,三级路由页面可能不会更新。 三、三级路由缓存的问题 路由嵌套问题:在Vue Router中,路由可以嵌套...
当存在三级路由，会发现设置都没有问题，但就是不能解决问题，三级路由的界面无法缓存，据说是官方的原因，直接放三级路由是无法被keep-alive 执行生效，解决方案就是，把二级的路由name 和三级路由name 一块 放到include 内。如果缓存的界面是 name为 Menu 1-2-1的界面， 需要缓存上一级路由name： ...