Vue中使用keep-alive以后刷新部分数据如何解决

最新推荐文章于 2024-03-01 14:39:05 发布
最新推荐文章于 2024-03-01 14:39:05 发布
阅读量1.9k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lqx_520/article/details/108198032
版权
在使用Vue.js的keep-alive组件时，遇到从其他页面返回时不刷新数据的问题。通过在activated钩子中重新获取数据，解决了数据不更新的难题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中遇到得问题：
描述如下：在这里插入图片描述
上图页面使用了keep-alive,所以当从其其他页面跳转到这个页面得时候不会刷新数据，因此解决方式为
，如下图所示就可以
在这里插入图片描述
上图中activated和created使用方法一致，在这个方法里重新获取一下数据就好了，我们得业务场景是
在这里插入图片描述
点击图标选取地理位置

【vue】局部刷新数据
qq_43319749的博客
02-13 900
方案一 可以直接在需要刷新的地方直接调用后台接口的相关函数，刷新数据，优点是速度比较快，不会出现闪白的现象，但是这样做会非常浪费流量，同时接口函数的调用也会使得代码逻辑变乱，可读性减低。 方案二 使用provide/inject，具体方法见下例： 在App.vue文件中，定义全局方法reload()： <template> <div id="app"> &l...
vue中使用keep-alive缓存页面后无法更新数据
Hgh_1997的博客
07-06 1180
比如一个商品列表，点击某个商品进行编辑，去到编辑页中进行操作，编辑完成后再次返回商品列表编辑的商品还未更新。 之前我们一般用mounted()或者created()进行初始化数据，keep-alive缓存后的组件只会执行一次mounted或者created的方法。 解决方案：使用activated去代替created或者mounted。 个人理解activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等 ...
vue使用keep-alive实现数据缓存不刷新
11-26
到现在，接触vue也小段时间了，项目进行到了一定程度，然而项目缺少了缓存机制，所以每次跳转页面都会重新created一下数据，虽说系统的数据请求速度很快，但是这样做对系统的性能会有很大的坏处的，所以到这里就要对系统优化下，添加缓存了。 其实到现在，对于vue还是没有玩通，每深挖一次，就会发现一次vue的精彩，开始不清楚要用什么实现缓存，找了好久，有好几种说法，就是用vuex、vuet或者keep-alive，然后对比了一下，在我认为，vuex和vuet是实现状态管理，重心是在数据处理上；想要实现整体的缓存，阻止created的刷新，就要用keep-alive。 所以这里我想要给大家介绍下如
vue 路由跳转 页面数据并没有更新，如何解决
weixin_61334593的博客
11-01 4791
vue 路由跳转 页面数据并没有更新，如何解决
解决vue keep-alive 数据更新的问题
12-01
在项目中使用<keep>包含<router>实现页面缓存，加速页面加载， 同时，这种方式带来一些弊端，请看如下大神解释： *********************************** 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。 当再次进入（前进或者后退）时，只触发activated。 *********************************** 这就带来一个问题，之前在项目中使用mounted在页面加载时获取数据，使用<keep-aliv
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用<keep>解决这个问题，下面是我的使用心得。 <keep>...
vue使用keep-alive保持滚动条位置的实现方法
10-17
2. 在Vue的主组件app.vue中，使用<keep-alive>包裹<router-view>，并根据路由的meta属性决定是否激活<keep-alive>： ```vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-...
vue2 设置keepAlive之后怎么刷新页面数据
qq_37309987的博客
03-01 2752
而本次的分享也是基于最近工作中遇到的一个场景，这个问题的出现，让我逐渐意识到规划的重要性，规划就是凡事谋定而后动，前期规划的越多，后期在进行迭代时，限制条件就会越少。经过对各种方案的实验，选择了这种方案，B 页面的顶层组件通过 provide 属性向外暴露数顶层组件的页面数据，页面内的业务子组件通过 inject 属性接收顶层组件的数据。情况二、B 页面的代码做了组件封装，比如说将 B 页面中的模块拆分成更小的业务组件，每个业务组件单独处理业务逻辑。1、A 页面 --> B 页面，B 页面刷新。
关于vue-element-admin中在keep-alive下想更新数据的问题
weixin_45932826的博客
11-16 788
(13条消息) 何时需要使用beforeRouteEnter_龙易安的博客-优快云博客_beforerouteenter
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
12-30
需求: 商品列表页面浏览,进入商品详情,点击返回仍然是之前浏览的位置 实现: 使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页的 name 为 proDetail ,只有 PageListArr 包含的字段才会被缓存,如 pageListArr.push(proList) <rout
keep-alive页面数据更新
yingmd2020的博客
08-24 785
场景：1.后台管理系统 2. 所有页面都用keep-alive进行了缓存 3. 当角色管理的数据变动时，需要同步更新用户管理的下拉框内容 解决办法： eventBus 声名一个全局委托对象 // main.js Vue.prototype.$bus = new Vue(); 更新列表后发送事件 此处用的是全局混入，可以参考AOP的使用，在列表新增，编辑或删除后触发 // mixin delAfter() { // 如果当前页没有声明busEvent，则默认“list”, 根据该字段可以在不同页面做相..
前端vue使用keepAlive: true,，解决页面缓存是否动态刷新的问题（可刷新可不刷新）
migexiaoliang的博客
08-30 4326
我们使用vue做项目时，，特别是搜索条件比较多的列表页时，搜索完后进入详情页，再从详情页回到列表页后数据重置，需要重新进行搜索，使用起来特别麻烦不友好。 所以比较友好的要求如下 : 1、从列表页进入详情页返回列表页时，连页数、筛选条件等都不能变，但是要列表刷新更新为最新的数据 2、列表页进数据编辑页再返回时，页数、筛选条件等都不能变，但是需要带条件刷新列表数据 3、不是详情页、编辑页进入列表页时，页数、筛选条件等都全部重置，列表数据刷新 4、列表页弹窗操作后，也需要带条件进行刷新数据...
keep-alive
qq_41562817的博客
12-29 453
keep-alive主要用于保留组件状态或避免重新渲染。其中，路由缓存适用于列表页 - 进入详情页 - 返回列表页。
vue keep-alive 数据更新问题
热门推荐
pobu168的博客
06-20 1万+
在项目中使用keep-alive>包含router-view>实现页面缓存，加速页面加载， 同时，这种方式带来一些弊端，请看如下大神解释： **************************************************************************** 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounte
vue列表页面缓存 keep-alive，列表跳转详情页面，列表页面缓存
高山景行，一尘不染
03-23 2792
A页面 B页面：列表页面 C页面：详情页面 需求A页面跳转B页面时，B页面需要加载最新数据；C页面跳转B页面时，B页面的数据是A页面跳转到B页面的数据 代码： router-view： <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <rout...
【vue】keep-alive的用法及详解
weixin_45291798的博客
10-12 3727
只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated这两个函数钩子！keep-alive组件，只要将子组件嵌套在这里面就可以实现组件的缓存，当页面返回时数据不会丢失，实现了我们常见的历史页面不刷新的效果。keep-alive组件是vue2.0提供的一个缓存组件，在组件切换过程中把切换出去的组件保留在。
vue中使用keep-alive缓存页面后 解决页面不刷新的问题 以及使用路由守卫后页面重复获取数据的问题
abcd123596的博客
08-31 7037
keep-alive
keep-alive数据刷新问题
火腿肠的博客
12-11 1911
有时候实时数据需要刷新但由于缓存会显示之前的数据 用户点击之后会报错： 处理方式如下： （1）在vuex中设置状态，动态绑定 include 值，在登录的时候缓存需要缓存的组件，在退出的时候，清除需要刷新的组件（效果很理想，也顺带解决了加载数据时，数据闪现的情况） 或者exclude写入不缓存的 （2）放在actived中获取数据 （3） tips： beforeRouteEnter --> created --> mounted --> activated --> deactiv
vue3 设置keep-alive如何刷新
最新发布
01-06
在 Vue 3 中，为了使 `keep-alive` 组件能够支持刷新操作，通常的做法是在包裹的组件内引入额外的状态来控制是否重新加载被缓存的内容。这可以通过切换一个唯一的键值来触发组件的销毁与重建。 当使用 `<keep-alive...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值