Vue使用keep-alive没有生效

最新推荐文章于 2024-05-14 21:12:11 发布
最新推荐文章于 2024-05-14 21:12:11 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43371136/article/details/118184891
版权

在vue项目中，会有列表页搜索得到某个结果后，再跳转详情页，再回来列表页就会回到初始状态。我们想保留之前搜索的结果时就要用到vue 的keep-alive了
keep-alive 是vue内置的一个组件，用来保存组件的原来的状态，避免重新渲染
在这里插入图片描述
使用过程中发现并没有被缓存，经过多方查找，发现是 include 数组的值没有和组件的name值对应

在这里插入图片描述
避坑

正兒八经DI瞎练ぃ
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用keepalive缓存页面三个页面之间跳转第一次不生效
FangFang's Blog
01-18 2241
经排查发现，是因为我跳转的路由中有中文，keepalive第一次缓存的是正常的带中文的路由，当返回的时候中文变成了乱码，keepalive中没有缓存这个乱码的路由，所以第一次返回的时候页面缓存没生效，第二次正常中文和中文乱码路由都被缓存了，这个时候页面缓存就正常了。里打印会发现，缓存的页面多了一个乱码的，这其实就是原来的B页面，就是因为这个页面B，中文和中文乱码的才被缓存下来，所以第二次再返回的时候B页面才不会再进入到created生命周期。生命周期，也就是B页面没被缓存，// 注意这里路由后面的中文。
router.push不刷新（8种解决方案）
热门推荐
leveretz的博客
11-13 1万+
router.push不刷新（8种解决方案）
vue中this.$router.push()跳转导致页面刷新导航栏active不改变问题解决~！
qq_45332221的博客
07-13 5284
前言 写vue项目中遇到了导航栏绑定的active不改变，路由正常跳转了结果导航栏显示还是第一个。 于是我就开始排错，发现每次路由跳转，导航栏绑定的activeNum都被刷新掉归0了，也就是显示第一个。刚开始确实好久没发现问题，以前也是这么写的没出过问题。 转机 后来我想是不是因为，这个导航栏是在router-view跳转的子组件中的原因，页面跳转的时候将整个子组件都刷新了，表面上看是子组件中的子组件刷新（相当于孙子级别的组件刷新），其实跳转的时候是刷新的整个子组件。 解决 然后我就在子组件的导航栏中cre
设置了keep-alive但缓存不生效的问题!!!
最新发布
weixin_47076912的博客
05-14 358
设置了keep-alive但缓存不生效的问题!!!
vant之van-list滑到底部不触发问题
zxyaq0916的博客
10-08 867
vant之van-list滑到底部不触发问题
vue keep-alive不生效 不记录保持列表位置y坐标状态问题
ccq的博客
12-30 568
vue keep-alive 状态保持问题
vue解决使用webpack打包后keep-alive不生效的方法
10-18
今天小编就为大家分享一篇vue解决使用webpack打包后keep-alive不生效的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
keep-alive不能缓存多层级路由菜单问题解决
11-21
目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案： 在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了 ...
vue2中的keep-alive使用总结及注意事项
08-28
Vue2 中的 Keep-Alive 组件使用总结及注意事项 Keep-Alive 组件是 Vue2 中的一个内置组件，能够在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。它可以与 Vue-Router 进行结合，缓存某个视图的整个内容。...
alive的不生效 keep vue_vue解决使用webpack打包后keep-alive不生效的方法
weixin_34260787的博客
01-14 329
问题是这样的，我使用webpack的npm run dev运行的时候，keep-alive路由缓存是有效的，但是我npm run build，把文件放到实际的项目中去的时候，会有如下的问题：路由如下：var menus = [{path: '/user',name: '用户',component: '/user',redirect: '/user/index1',icon: 'fa-bandcam...
vue keep-alive 不生效 以及前进 后退 对数据刷新和保留缓存操作
天渺(喵)工作室
04-18 1957
因为项目Vue router 连续嵌套了好几层 首先检查keep-alive的 include 和including 属性是否应用正确 include 是缓存包含including是缓存相反 项目中嵌套了好几层keep-alive 那个页面需要缓存 应当给当前页面 父级最近的router 外面加keep-alive 而不是APP.vue 的最外层 因为所做的项目中有很多 分页页面 分页...
Vue3中keep-alive路由缓存不生效
m0_58440770的博客
08-23 948
vue3 keep-alive路由缓存注意点
关于keep-alive的第一次不缓存
weixin_45406198的博客
06-15 1322
一直使用keepalive进行缓存，最近出现一个问题，发现在beforeRouteLeave里对meta里的keepalive进行设置false和true的时候，第一次返回到 使用了keepalive的页面时，页面没有缓存而是重新刷新了，第二次进入的时候才进行了缓存，找了很多的方法尝试都没有效果，最后发现，只要在router.js里设置keepAlive为true，离开或者进入到页面的时候不要对keepAlive再次进行修改就不会出现第一次不缓存的情况，但是同时出现了页面一直在第一次缓存的状态里，所以在离开
vue中使用keep-alive失效
qq_42282987的博客
11-07 810
原本是想一起缓存的，但这里div包裹后缓存失效，删除div，将NavHome组件移到外层，如下。keep-alive中包含的是div而不是组件时，keep-alive会失效，如下。keep-alive的缓存效果恢复了。
vue三级以上菜单keep-alive无效解决办法
ll7425的博客
11-15 2421
所以解决办法将每个子组件都会存在加载缓存它的父组件，将Layout的name设置为唯一值、common也是如此。每个子组件与父组件都会公用Layout、Common,
vue keep-alive include无效
大师兄
11-26 4468
原文链接: https://dsx2016.com/?p=713 微信公众号: 大师兄2016 检查版本 确定当前的vue版本的是2.1+ 因为include和exclude是vue2.1.0新增的两个属性. package.json "vue": "^2.5.2", 检查name 注意,不是router.js中的name,而是单个vue组件中的name属性. 建议将rou...
修复vue-element-admin多级路由keep-alive不生效问题
qq_53103531的博客
11-14 935
修复vue-element-admin多级路由keep-alive不生效问题
alive的不生效 keep vue_vue keep-alive 不生效 以及前进 后退 对数据刷新和保留缓存操作...
weixin_39728909的博客
01-14 64
https://blog.csdn.net/sinat_37255207/article/details/89373825因为项目Vue router 连续嵌套了好几层 首先检查keep-alive的 include 和including 属性是否应用正确include 是缓存包含including是缓存相反项目中嵌套了好几层keep-alive 那个页面需要缓存 应当给当前页面 父级最近的r...
vue keep-alive 不生效
05-01
Vue 中的 keep-alive 组件是用于缓存组件实例的，通过将其包裹在需要缓存的组件外面，可以保留组件的状态，防止频繁地销毁和重新创建组件。 要使 keep-alive 组件生效，需要注意以下几点： 1. 在需要缓存的组件外面包裹 keep-alive 组件，并设置其 include 或 exclude 属性。 2. 在组件内部使用 activated 钩子函数，当组件被缓存并被激活时会执行该函数。 3. 如果组件内部有数据的改变需要及时更新到模板上，则需要在组件销毁时手动将数据清空，避免数据被缓存。 如果 keep-alive 组件不生效，可以排查以下几个方面： 1. 检查是否正确设置 include 或 exclude 属性。 2. 检查缓存的组件内部是否有使用 activated 钩子函数。 3. 如果数据不及时更新，检查是否手动清空了缓存中的数据。 若以上几个方面都没有问题，可能是由于 keep-alive 缓存逻辑和具体组件逻辑冲突，可以将 keep-alive 组件暂时注释掉，再观察组件的正常运行和数据流动情况，通过对比找出问题的根源。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值