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

最新推荐文章于 2022-08-30 21:29:39 发布
最新推荐文章于 2022-08-30 21:29:39 发布
阅读量1.9k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lqx_520/article/details/108198032
版权

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

小小蝙蝠侠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue】局部刷新数据
qq_43319749的博客
02-13 805
方案一 可以直接在需要刷新的地方直接调用后台接口的相关函数，刷新数据，优点是速度比较快，不会出现闪白的现象，但是这样做会非常浪费流量，同时接口函数的调用也会使得代码逻辑变乱，可读性减低。 方案二 使用provide/inject，具体方法见下例： 在App.vue文件中，定义全局方法reload()： <template> <div id="app"> &l...
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用<keep>解决这个问题，下面是我的使用心得。 <keep>...
vue使用keep-alive实现数据缓存不刷新
11-26
到现在，接触vue也小段时间了，项目进行到了一定程度，然而项目缺少了缓存机制，所以每次跳转页面都会重新created一下数据，虽说系统的数据请求速度很快，但是这样做对系统的性能会有很大的坏处的，所以到这里就要对系统优化下，添加缓存了。 其实到现在，对于vue还是没有玩通，每深挖一次，就会发现一次vue的精彩，开始不清楚要用什么实现缓存，找了好久，有好几种说法，就是用vuex、vuet或者keep-alive，然后对比了一下，在我认为，vuex和vuet是实现状态管理，重心是在数据处理上；想要实现整体的缓存，阻止created的刷新，就要用keep-alive。 所以这里我想要给大家介绍下如
解决vue keep-alive 数据更新的问题
12-01
在项目中使用<keep>包含<router>实现页面缓存，加速页面加载， 同时，这种方式带来一些弊端，请看如下大神解释： *********************************** 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。 当再次进入（前进或者后退）时，只触发activated。 *********************************** 这就带来一个问题，之前在项目中使用mounted在页面加载时获取数据，使用<keep-aliv
keep-alive页面数据更新
yingmd2020的博客
08-24 711
场景：1.后台管理系统 2. 所有页面都用keep-alive进行了缓存 3. 当角色管理的数据变动时，需要同步更新用户管理的下拉框内容 解决办法： eventBus 声名一个全局委托对象 // main.js Vue.prototype.$bus = new Vue(); 更新列表后发送事件 此处用的是全局混入，可以参考AOP的使用，在列表新增，编辑或删除后触发 // mixin delAfter() { // 如果当前页没有声明busEvent，则默认“list”, 根据该字段可以在不同页面做相..
Vue keep-alive 应用场景及解决办法
不同场景下的水平居中
11-03 1931
keep-alive 缓存页面
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
前端vue使用keepAlive: true,，解决页面缓存是否动态刷新的问题（可刷新可不刷新）
migexiaoliang的博客
08-30 3964
我们使用vue做项目时，，特别是搜索条件比较多的列表页时，搜索完后进入详情页，再从详情页回到列表页后数据重置，需要重新进行搜索，使用起来特别麻烦不友好。 所以比较友好的要求如下 : 1、从列表页进入详情页返回列表页时，连页数、筛选条件等都不能变，但是要列表刷新更新为最新的数据 2、列表页进数据编辑页再返回时，页数、筛选条件等都不能变，但是需要带条件刷新列表数据 3、不是详情页、编辑页进入列表页时，页数、筛选条件等都全部重置，列表数据刷新 4、列表页弹窗操作后，也需要带条件进行刷新数据...
Vue实现刷新当前单个页面 适用于keep-alive【vue3适用】
qq_39909614的博客
07-01 6021
如果我们想实现下图的功能，是需要用到 keep-alive的。 假设你打开了2个页面，如何刷新其中的某一个页面呢？在实现这个功能之前，我原本以为很简单，Vue应该有提供的接口，直接调用一下即可。比较坑的是Vue根本没有提供相应的接口，需要自己来手写实现。1.使用router.go(0)来刷新页面不可行原因：使用go(0)直接把整个页面刷新了，你打开的所有tab都将会被刷新。2.使用location.reload()刷新不可行原因：和上面的一样，都将会丢失所有页面的数据。无法实现对单独某一个tab刷新。以上两
解决Vue中使用keepAlive不缓存问题
12-28
1.查看app.vue文件，这个是重点，不能忘记加（我就是忘记加了keep-alive） 2.查看router.js { path:'/loanmessage', compon
使用keep-alive时，数据无法刷新的问题
明知迷途，从未折返
01-28 7781
keep-alive 相关内容 概念： &amp;lt;keep-alive&amp;gt; 是Vue的一个内部组件，适合用来缓存不需要实时更新的组件，这样可以保留组件状态避免重新渲染。 Props： include ：接受字符串或正则表达式，这里是需要被缓存的组件名 exclude ：接受字符串或正则表达式，这里是不需要缓存的组件名 max ：接受数字，最多可以缓存多少组件实例 问题： 在需要重新请求数据的...
vue keep-alive 数据更新问题
热门推荐
pobu168的博客
06-20 1万+
在项目中使用keep-alive>包含router-view>实现页面缓存，加速页面加载， 同时，这种方式带来一些弊端，请看如下大神解释： **************************************************************************** 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounte
Vue 爬坑之旅 -- keepAlive 与 vue-router 结合使用实现页面缓存及记住滚动位置功能的实现及几个需要注意的点
Alex_Zhao 的博客
04-03 8886
要注意页面布局，不要限制页面滚动位置 vue中 进入详情页记住滚动位置（keep-alive） vue缓存页面返回到指定滚动位置 移动端基于vue-router的滚动位置记录(keep-alive) vue-router在返回时返回到上次滚动位置 组件缓存问题 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新 ...
keep-alive数据刷新问题
火腿肠的博客
12-11 1836
有时候实时数据需要刷新但由于缓存会显示之前的数据 用户点击之后会报错： 处理方式如下： （1）在vuex中设置状态，动态绑定 include 值，在登录的时候缓存需要缓存的组件，在退出的时候，清除需要刷新的组件（效果很理想，也顺带解决了加载数据时，数据闪现的情况） 或者exclude写入不缓存的 （2）放在actived中获取数据 （3） tips： beforeRouteEnter --> created --> mounted --> activated --> deactiv
keep-alive中需要刷新一部分页面的操作
qq_43427385的博客
09-09 1229
作用： 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了. 介绍： 　 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 实际项目中,需要配合vue-router共同使用. router-view 也是一个组件，如果直接被包在 keep-alive 里面，所
keepalive缓存刷新页面数据问题
GraffitiBoy的博客
06-17 2544
keepalive缓存刷新页面数据问题 移动端项目中：新增业务的时候有两个需求：一是选择人员；二是选择危险源，这两个都要跳转到其他页面去选择，每次的路由跳转都会刷新页面的数据，所以这个时候需要引入缓存，保存其他已填写的数据，这时候我使用了keepalive来缓存页面 //首先App.vue下添加keepAlive <div id="app"> <keep-alive > <router-view v-if="$route.meta.keepAlive"&
vue keep-alive 详解 include，activated，deactivated 解决前进刷新，回退缓存
随笔记录-分享&记忆
10-29 3717
vue keep-alive 详解 include，activated，deactivated解决前进刷新，回退缓存 问题说明：有searchPage => A(搜索页面)， searchResult => B（搜索结果页面），goodsDetail => C（详情页面） 三个页面，A页面输入搜索条件，进入B页面，然后跳转C页面。 需求：顺序要求是A - > B ->...
vue-router 实现组件的缓存之 keep-alive
每天多一点干货
11-01 9206
一、keep-alive简介 keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法：<keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive>props include-字符串或正则表达式，只有匹配的组件会被缓存 exclude-字符串或正则表达式，任何匹
vue2.7 使用keep-alive后页面不刷新
最新发布
05-29
Vue.js 中的 `keep-alive` 是一个抽象组件，用于缓存组件实例或者 DOM。当组件在 `keep-alive` 内被切换时，它们的状态将会被保留，不会重新渲染。这可以提高应用程序的性能，减少不必要的重复渲染。 如果你使用 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值