keep-alive缓存的数据无法在页面刷新问题，Vue中浏览器全局刷新

最新推荐文章于 2024-05-13 13:50:47 发布
最新推荐文章于 2024-05-13 13:50:47 发布
阅读量906 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46547740/article/details/109249664
版权

问题：

vuex数据更新了但页面的数据没有更新，页面的组件是用keep-alive包裹进行缓存的，如何解决组件更新问题

简述解决方案：

在一级路由下有四个二级路由
利用keep-alive将四个组件包裹，进行缓存
在城市组件中，添加点击城市的事件
点击后判断是否更改了城市，如果更改了就修改vuex的数据，跳转页面，指定浏览器刷新
若没有更新就直接跳回页面

一级路由中的keep-alive

在这里插入图片描述
city组件

在这里插入图片描述vuex里面的数据设置

在这里插入图片描述

浏览器页面：

在这里插入图片描述
这篇博客完善了之前的城市渲染，解决了keep-alive的bug
第一篇城市渲染

Gordon-Liu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue keep-alive 一进页面刷新，解决刷新死循环问题
weixin_42066070的博客
04-12 2524
需求分析 1.切换户号的时候，进到页面，需要刷新缓存，去其他页面不需要刷新缓存 2.在上个页面传个是否刷新的参数 3.全局判断假如有这个参数的路由，那么进行页面刷新。并且把刷新页面的参数去掉 第一步的代码 this.$router.push({ path: this.dataList.pathData2, query: { refresh: true }, }); appmain.vue里写全局 <template&gt
8种vue中DOM不跟新的问题
weixin_67642008的博客
10-13 4480
8中Vue中DOM不跟新的情况和解决方案
vue中使用keep-alive缓存页面后 解决页面不刷新的问题 以及使用路由守卫后页面重复获取数据的问题
abcd123596的博客
08-31 6620
keep-alive
【vue】keep-alive:true缓存导致页面数据不刷新
最新发布
小墨鱼的前端问题录
05-13 328
activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated。keep-alive生命周期钩子函数：activated、deactivated。deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated。使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，承担原来created钩子中获取数据的任务。需要在activated阶段获取数据，
Vue2 Vue3 keep-alive 使用、解决keep-alive缓存导致页面不刷新的问题
林中明月间丶
10-31 3380
<keep-alive exclude="Detail"> <router-view/> </keep-alive> activated () { if (this.lastCity !== this.city) { this.lastCity = this.city this.getHomeInfo() ...
Vue keep-alive 应用场景及解决办法
不同场景下的水平居中
11-03 1931
keep-alive 缓存页面
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
10-15
这就是 `vue keep-alive` 在列表页缓存和详情页返回中的应用场景。 首先，我们需要了解 `vue keep-alive` 的基本用法。`keep-alive` 是一个内置组件，用于缓存 Vue 实例，避免组件的渲染和销毁过程，保持组件的状态...
keep-Alive搭配vue-router实现缓存页面效果的示例代码
10-15
在Vue.js应用中，有时我们需要实现页面的缓存功能，以保持用户在切换页面时的状态。`keep-alive`组件是Vue中用于组件缓存的关键工具，它可以帮助我们避免重复渲染那些需要保持状态的组件。结合`vue-router`，我们...
通过vue提供的keep-alive减少对服务器的请求次数
12-10
在Vue 2.0中，为了提升用户体验并减少对服务器的请求次数，Vue引入了一个名为`keep-alive`的特性。这个特性允许我们将组件的状态进行缓存，避免在用户导航时重新渲染和重新获取数据。 `keep-alive`组件用于包裹动态...
vue的keep-alive中使用EventBus的方法
12-10
在Vue开发过程中，为了优化用户体验和提高性能，我们经常使用`keep-alive`组件来缓存页面，避免频繁地创建和销毁组件。然而，当在其他页面改变数据后需要即时更新缓存页面时，传统的组件通信方式可能不再适用。这时...
Vue中keep-alive的两种应用方式
10-15
在Vue.js框架中，`keep-alive`是一个特殊的组件，用于缓存子组件的状态，防止在切换组件时销毁和重新创建。它可以帮助我们优化性能，尤其是处理数据加载量较大或者有复杂计算的组件时。本文将详细介绍Vue中`keep-...
vue缓存的keepalive页面刷新数据的方法
10-17
主要介绍了vue缓存的keepalive页面刷新数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小bug：解决vue切换路由页面刷新但数据不更新的问题~
m0_58875280的博客
09-04 2284
晚上好呀。今天做项目自己给自己测试，发现当我们在不同的网页使用同一份数据的时候，由于使用<keep-alive>组件，数据被自动缓存了，所以导致点击下一个相关页面的时候虽然页面刷新了但是后台数据没有刷新的问题。
Vue实现刷新当前单个页面 适用于keep-alive【vue3适用】
qq_39909614的博客
07-01 6009
如果我们想实现下图的功能，是需要用到 keep-alive的。 假设你打开了2个页面，如何刷新其中的某一个页面呢？在实现这个功能之前，我原本以为很简单，Vue应该有提供的接口，直接调用一下即可。比较坑的是Vue根本没有提供相应的接口，需要自己来手写实现。1.使用router.go(0)来刷新页面不可行原因：使用go(0)直接把整个页面刷新了，你打开的所有tab都将会被刷新。2.使用location.reload()刷新不可行原因：和上面的一样，都将会丢失所有页面的数据。无法实现对单独某一个tab刷新。以上两
设置keep-alive后，跳转到同一组件，路由变化，但数据未更新
qq_38327841的博客
07-27 915
问题原因 主要是因为设置keep-alive后，页面将不会发送新的请求，而是继续用上一次的数据，这样就导致路由已经发生变化，但是页面仍然是上一次的数据。 解决方式 方式一 在这个页面中添加activated属性，并在里面调用一次数据请求。这样做有一个坏处就是在请求到新的数据之前，页面仍然是上一次的数据。 方式二 在keep-alive中添加属性exclude，并将想刷新的组件（即不想keep-alive）的name填进去。注意，一定要设置name 比如我有一个组件，name:'card'，那么我就可以这么写
keep-alive，数据无法刷新的问题
代码青春
01-04 917
keep-alive 相关内容 概念：<keep-alive>是Vue的一个内部组件，适合用来缓存不需要实时更新的组件，这样可以保留组件状态避免重新渲染。 Props： include ：接受字符串或正则表达式，这里是需要被缓存的组件名 exclude ：接受字符串或正则表达式，这里是不需要缓存的组件名 max ：接受数字，最多可以缓存多少组件实例 问题： 在需要重新请求数据的时候，依然走的缓存 案例： 问题描述： 这个项目是一个后台管理系统，由于很多组件都有走缓存的...
Vue 爬坑之旅 -- keepAlive 与 vue-router 结合使用实现页面缓存及记住滚动位置功能的实现及几个需要注意的点
Alex_Zhao 的博客
04-03 8883
要注意页面布局，不要限制页面滚动位置 vue中 进入详情页记住滚动位置（keep-alive） vue缓存页面返回到指定滚动位置 移动端基于vue-router的滚动位置记录(keep-alive) vue-router在返回时返回到上次滚动位置 组件缓存问题 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新 ...
vue使用keep-alive实现数据缓存不刷新
inyiyi的博客
06-11 2313
1、keep-alive要配合router-view使用，这里要注意一点就是，keep-alive本身是vue2.0的功能，并不是vue-router的，所以再vue1.0版本是不支持的。keep-alive官方文档点这里，代码实现如下，router-view是在入口APP.vue里面. &lt;template&gt; &lt;div id="app"&gt; &lt;keep-...
keep-alive
Zhoujia1316的博客
06-01 875
keep-alive的概念 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 参数 Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则
Vue3全局keep-alive缓存,组件被销毁时数据重新加载
06-01
Vue3中，可以使用 `keep-alive` 组件来缓存组件，从而避免多次重新加载数据。当组件被销毁时，数据会重新加载。下面是一个示例： ```vue <template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { name: "App", watch: { $route(to) { if (!to.meta.keepAlive) { // 如果不缓存组件，则将缓存的组件清除 this.$destroy(); } }, }, }; </script> ``` 在上面的例子中，我们通过 `watch` 监听 `$route` 的变化，如果组件需要缓存，则使用 `keep-alive` 组件缓存该组件，否则直接渲染组件。当组件被销毁时，如果不需要缓存，则将缓存的组件清除。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值