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

最新推荐文章于 2024-07-18 14:00:18 发布
最新推荐文章于 2024-07-18 14:00:18 发布
阅读量467 收藏 3
点赞数 1
文章标签： vue.js 缓存 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qidfan/article/details/131419452
版权
在使用Vue构建后台管理系统时，遇到菜单缓存问题，一级和二级菜单可以正常缓存，但三级菜单不行。文章指出这可能是由于vue的keep-alive组件本身的限制。为解决此问题，建议在路由守卫beforeEach中添加特定判断，通过修改to.matched数组来优化匹配项，确保三级页面也能被正确缓存。经过测试，这种方法是有效的。
摘要由CSDN通过智能技术生成

使用vue做后台管理系统，需求是所有的菜单打开之后，下次点击的时候的使用缓存，这里很简单的做法就是用来包裹住;但是一级菜单和二级菜单都没有问题，三级菜单就会出现无法缓存的问题，网上找资料说是vue中keep-alive本身存在的缺陷，需要在路由守卫中将matched属性做一下优化，具体如下

 // 处理keep-alive三级页面不缓存
  if (to.matched && to.matched.length > 2) {
    to.matched.splice(1,to.matched.length -2 )
    next()
  }

在beforeEach路由钩子中加一下这个判断就行了，亲测有效

defun66
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 更改keep-alive源码，满足条件性缓存（多个页签之间切换缓存，关闭页签重新打开不缓存）
D321xiaoding的博客
02-07 1037
应用场景 当系统打开多个页签时，多个页签之间切换去做缓存，关闭页签重新打开该页签不缓存。 解决方案 更改 vue keep-alive源码 1、制造一个唯一的key值，在路由参数里面加一个时间戳 1.1 因keep-alive 使用组件名称name值作为唯一的key值去做条件缓存，但是该项目因书写不规范导致组件的name值不是唯一的。在路由的参数 里面增加一个时间戳 // 当点击系统左侧菜单的时候加时间戳 select(url) {
Vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存
宋小羽
01-04 5111
场景：为了优化用户体验，当从商品详情页返回到商品列表页时，不需要再次请求商品列表数据。由此，我想到了使用Vue中的keep-alive，但常规keep-alive的使用方法仅满足任何条件下都缓存单个页面。 但在实际过程中，我们从其他页面（如商品分类页）进入商品列表页时，应当是请求商品列表的数据，不再缓存该页面。这里，如果使用keep-alive的常规方法则无法满足需求，所以有了以下的解决方案。 1. 配置路由出口渲染组件 在App.vue文件进行以下配置 <keep-alive> &lt.
解决 vue 多层级路由 缓存失效 解决基于 keep-alive 的多级路由缓存问题 vue keep-alive 缓存失效 vue-element-admin多层级路由 缓存失效
IT6666_it的博客
05-27 209
首先 keep-alive 是在 Layout 上进行处理，如果不缓存 Empty ，则 Empty 下面的页面将无法被缓存，如果缓存 Empty ，又会导致 Empty 里面的所有页面都被缓存，无法按需清除，相信接触过的肯定感同身受其中的大坑。这里需要注意，路由配置还是保持多级嵌套的形式，而这个配置并非最终注册使用的路由，仅仅是提供侧边栏导航菜单使用，同时再生成一份用于动态注册路由的数据，图例如果没看明白的话，可以看下面两组数据。title: ‘客户列表’title: ‘客户详情’
vue项目中组件缓存和不缓存的区别
最新发布
一个UI、前端爱好者。
07-18 379
在Vue项目中，组件缓存和不缓存的区别主要体现在组件的状态保持、性能优化以及内存使用等方面。
解决vue项目三级菜单路由无法缓存问题
sweet202005的博客
08-09 2126
在vue项目开发过程中，肯定会遇到标签栏功能，有标签栏大概率就会遇到一些页面缓存问题。一般路由缓存会用到keep-alive。
vue-element-admin 三四级路由菜单无法缓存 数据丢失问题 最简单的解决办法
calvinly的博客
08-25 4151
vue-element-admin 开源框架，支持缓存的只能是一、二级路由页面，三级网上就无法缓存了； 看了很多大佬的解决办法文章，尝试了很多，都无法解决办法，折腾了很久，快要放弃的时候，想到一个笨办法，但是却很简单、很有效！！！ 方法核心要点 1、将原本的三级路由页面 定义在一级 或 二级路由位置上； 2、将上述目标路由页面设置为隐藏； 3、在三级路由上定义一个页面，点击后，关闭当前页面，并跳转至目标页面（即1定义的页面）； 贴一下已经实现的代码，仅供参考 路由文件代码： import Layout fr
keep-alive不能缓存多层级路由菜单问题解决
10-15
主要介绍了keep-alive不能缓存多层级路由菜单问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue2.0缓存数据页面与部分组件不缓存数据页面
settingSun66的博客
07-10 9952
keep-alive 缓存所有组件。 但是有些组件在我们的程序中是不想被缓存下来的，就拿我现在的这个项目做比方吧。 这个我是需要缓存的，因为我要去选择省份所以需要离开这个组件，并去渲染另一个组件，姓名，电话，邮编我是想缓存下来的，省份，城市和区县我是不想缓存的因为我要去别的组件里不停的改变地址。
vue里如何主动销毁keep-alive缓存的组件
10-17
本文将详细介绍如何在Vue项目中，特别是在使用了`keep-alive`组件缓存的情况下，主动销毁那些被缓存的组件。 背景介绍 在后台管理系统中，使用标签页切换是一种常见的用户交互方式。为了提升用户体验，当用户切换...
vue keep-alive 动态删除组件缓存的例子
10-16
接下来，我们要讲解如何在Vue项目中动态地删除keep-alive缓存的组件。在实际开发中，我们常常会遇到这样的业务场景：当用户切换不同的标签页（tab页）时，希望保持当前标签页组件的状态，以便在切换回来时能够恢复...
详解vue-template-admin三级路由无法缓存的解决方案
10-15
主要介绍了vue-template-admin三级路由无法缓存的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 使某个组件不被 keep-alive 缓存的方法
12-11
提出问题 最近在做项目发现一个问题，当我使用了 keep-alive 标签后，进入了某个路由进行一系列操作，再点击浏览器后退，再次进入刚才的路由，页面被操作的数据没有初始化！ 分析问题 这是因为 keep-alive 将路由页面缓存，所以该路由没有完成整个生命周期，没有 destroyed，因此重新进入也没有触发其他生命周期钩子，如 created 等。 解决问题 （1）. 查看官方文档 当组件在 keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include – 字符串或正则表达式。只有匹配的组件会被缓存。 exc
Vue2.0 实现页面缓存和不缓存的方式
10-16
今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
vue中keepAlive页面缓存，详情页返回列表页刷新问题
星辰的笔记
04-26 6640
问题 当我们从列表页面的第二页进入某一项的详情页后 再从详情页返回列表页，此时列表页会刷新回第一页 用户体验极差 需要的效果 返回时仍要回到之前保存的好的页数和筛选条件等 解决 需要缓存的页面则添加keepAlive，不需要缓存的页面则不加 路由 <!-- 缓存的页面 --> <keep-alive> <router-view v-...
深入理解Vue keep-alive：动态组件与路由缓存
`keep-alive`组件就是Vue.js提供的一种解决方案，它允许我们将组件的状态保持在内存中，而不是在切换路由或者显示其他组件时销毁它们。本文将深入探讨`keep-alive`的工作原理，并通过具体的例子和源码分析来帮助理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值