keep-alive缓存组件，三级菜单组件无法缓存问题解决

已于 2023-11-22 09:27:26 修改
阅读量856 收藏 4
点赞数 2
文章标签： 缓存
于 2022-09-20 10:11:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47818125/article/details/126947593
版权

后台管理菜单列表三级菜单无法缓存组件问题，根本原因是在于keep-alive本身存在的缺陷，需要在路由守卫中将matched属性做一下优化，具体如下

Router.beforeEach((to, from, next)=>{
	if(to.matched && to.matched.length>2){
		to.matched.splice(1,to.matched.length -2)
	}
	next()
})

在路由勾子上添加如上代码解决keep-alive缓存问题

转身_learner
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
keep-alive不能缓存多层级路由菜单问题解决
11-21
这出现的原因是多级路由导致的，就是router-view嵌套 在层级不同的router-view中切换tag会出现缓存数据失效的问题。目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案： 在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了 实列代码如下： const _import = require('@/router/_import_prodection');//获取组件的方法 import {tree} from '@/utils/treeDate' import
vue里如何主动销毁keep-alive缓存的组件
10-17
主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue三级以上菜单keep-alive无效解决办法
ll7425的博客
11-15 2379
所以解决办法将每个子组件都会存在加载缓存它的父组件，将Layout的name设置为唯一值、common也是如此。每个子组件与父组件都会公用Layout、Common,
vue keep-alive 缓存 不生效解决方案
热门推荐
娃哈哈_的博客
07-24 2万+
作用 vue 【缓存】方案，保留组件状态或避免重新渲染，能够缓存当前页面的所有数据 用法 与**【动态组件】**一起使用：（会缓存不活动的组件实例，而不是销毁它们） <keep-alive> <component :is="view"></component> </keep-alive> 与**【vue-router】**一起用： <keep-alive> <router-view></router-vi
keep-alive不能缓存多层级路由菜单问题
一路从容
08-30 1万+
这出现的原因是多级路由导致的，就是router-view嵌套 在层级不同的router-view中切换tag会出现缓存数据失效的问题。目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案： 在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了 实列代码如下： const _import...
使用vue的keep-alive缓存组件，三级菜单组件无法缓存问题解决
qidfan的博客
06-27 425
使用vue做后台管理系统，需求是所有的菜单打开之后，下次点击的时候的使用缓存，这里很简单的做法就是用来包裹住;但是一级菜单和二级菜单都没有问题，三级菜单就会出现无法缓存的问题，网上找资料说是vue中keep-alive本身存在的缺陷，需要在路由守卫中将matched属性做一下优化，具体如下。在beforeEach路由钩子中加一下这个判断就行了，亲测有效。// 处理keep-alive三级页面不缓存。
解决vue项目三级菜单路由无法缓存问题
sweet202005的博客
08-09 1617
在vue项目开发过程中，肯定会遇到标签栏功能，有标签栏大概率就会遇到一些页面缓存问题。一般路由缓存会用到keep-alive。
若依框架vue三级及以上菜单keep-alive缓存失效问题
qq_52065282的博客
08-01 2038
在若依框架中配置正确且页面写了name='Home'进行缓存，依然无法生效。打开三级及以上菜单后再次点击时缓存，不请求接口增强用户体验。
解决vue项目中keep-alive不能缓存多层级路由问题
weixin_46995731的博客
03-22 7473
解决vue项目中keep-alive不能缓存多层级路由 看了很多文档，都是把嵌套多级路由简化（keep-alive满足二级/一级菜单缓存）,菜单数据和路有数据分离开,这种方案解决起来相对复杂一些,下面的方法相对简单一些,我是看了这篇文章,结合自己的项目稍作修改.下边也有自己遇到的问题及解决方法. 需求介绍 自己项目的图片不便粘贴,我还是引用原博主的图片 项目中使用的是3级路由,要实现三级菜单来回跳转保存状态(并且跨二级菜单间的三级菜单页面切换也需要保存状态) 咱们首先想到的是使用keep-alive标签来
keep-alive不能缓存多层级路由(vue-router)菜单问题解决
wocwin的博客
06-09 1万+
keep-alive不能缓存多层级路由(vue-router)菜单问题解决
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
vue keep-alive 动态删除组件缓存的例子
10-16
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 路由缓存 路由嵌套 路由守卫 监听物理返回
weixin_30608131的博客
01-09 197
最近开发vue项目，遇到的一些问题，这里整合一下，看到一些博客已经有写相关知识，然后自己再次记录一下。 这是关于vue路由相关比较常见的问题，以后遇到相关路由的问题，会不断更新这篇博客。 需求1：从填写表单A页面跳转到B页面，然后再从B页面返回到A页面，实现A页面的所填的数据保留 一.设置路由缓存： 　　1.App.vue中加入<keep-alive> 具体代码如下： ...
vue中使用keep-alive进行组件缓存（解决组件不缓存问题）
pipizhou16的博客
07-28 7411
vue中使用keep-alive进行组件缓存（解决组件不缓存问题）
【原创】vue中使用keepAlive组件缓存失效
a3335581的博客
03-11 1万+
项目开发中在用户从菜单列表页(List)进入详情页(Detail)需保存List的《当前页数、每页条数......》状态。 因此使用了keep-alive组件，原始代码如下，需要缓存的页面设置meta.KeepAlive为true。 &lt;keep-alive v-if="$route.meta.KeepAlive"&gt; &lt;router-view/&gt; &lt;/ke...
vue路由全面详解（下）：路由守卫、缓存路由组件（终于要把路由的常用知识写完啦）
czjl6886的博客
01-07 2896
vue路由全面详解（下）：路由守卫、缓存路由组件（终于要把路由的常用知识写完啦）
学习Vue之【用keep-alive+路由守卫实现动态缓存页面】
随时准备转行
12-21 1010
简单记录keep-alive+路由守卫实现首页、列表、详情之间的动态页面缓存。
解决 vue 多层级路由 缓存失效 解决基于 keep-alive 的多级路由缓存问题 vue keep-alive 缓存失效 vue-element-admin多层级路由 缓存失效
Angela_L的博客
03-22 2158
解决 vue 多层级路由 缓存失效 解决基于 keep-alive 的多级路由缓存问题 vue keep-alive 缓存失效 vue-element-admin多层级路由 缓存失效
336_C++_ImageBuffer类管理ImagesCache类，ImagesCache负责在进程地址空间中映射给定大小区域，处理较大数据的缓存和缓冲
最新发布
HanLongXia的博客
05-15 39
ImagesCache 类负责管理图像数据的缓存节点， ImageBuffer 类则作为图像的缓冲区。它隐藏了缓存实现的细节，只暴露必要的接口，通过将缓存管理和缓冲管理分离到不同的类中，可以更容易地修改或扩展其中一个类，而不会影响另一个类的功能。
vue3设置keep-alive缓存组件
12-02
在Vue3中，设置keep-alive缓存组件非常简单，只需要将要缓存的组件使用<keep-alive>标签包裹即可。例如： ```html <template> <div> <keep-alive> <router-view /> </keep-alive> </div> </template> ``` 上述代码中，<router-view>是Vue Router提供的路由组件，使用<keep-alive>标签包裹<router-view>，就可以实现对该组件的缓存。 如果需要动态控制缓存哪些组件，可以通过在<keep-alive>标签上使用include和exclude属性来实现。例如： ```html <template> <div> <keep-alive :include="cacheList"> <router-view /> </keep-alive> </div> </template> <script> export default { data() { return { cacheList: ['Home', 'About'] // 要缓存的组件名称列表 } } } </script> ``` 上述代码中，通过在<keep-alive>标签上使用:include属性，并将要缓存的组件名称列表传入，就可以动态控制缓存哪些组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值