vue点击详情页面keep-alive的缓存问题

最新推荐文章于 2022-08-31 22:36:30 发布
最新推荐文章于 2022-08-31 22:36:30 发布
阅读量10w+ 收藏
点赞数 3
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42821697/article/details/109442968
版权

今天有个列表
点击以后 进入详情 然后在返回，再点击其他的列表数据，详情页面请求的还是上一次请求的id 除非刷新才会请求现在的.
这样子对用户体验感是非常不好滴,查了半天资料 发现了activated这个api
解决有些不需要被缓存的组件页面 设置 activated 即可以再次进行事件的响应

在这里插入图片描述

范天缘
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
解决vue使用keep-alive 第二次进入缓存还在的方案
weixin_42066070的博客
11-12 2487
概念 keep-alive 是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中，这些定义自己去看。 痛点 使用了keep-alive 虽然能够实现缓存，但是缓存一旦被设置就一直存在。不管用户如何关闭菜单，缓存还是一直存在。 前提条件 框架采用的是vue2.0的 缓存所有页面 App.vue 1-1...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue中使用keep-alive缓存页面后 解决页面不刷新的问题 以及使用路由守卫后页面重复获取数据的问题
abcd123596的博客
08-31 6572
keep-alive
vue3 keep-alive缓存问题
程序员小曲的博客
09-08 2159
业务场景：详情页面A进入编辑页面B，编辑页面B进入选择页面C，选择页面C返回编辑页面B 假如是vue2的话 可以通过判断路由，来使变量初始化即可，因为vue2变量都是在data里面定义的，所以可以通过可以Object.assign(vm.$data, vm.$options.data())直接初始化变量。但是因为是vue3重构 我们的变量都是在setup中，就不能通过这种办法来初始化变量 方法1 错误 通过meta里面的keepAlive来控制，我在a进入b的时候 onBeforeRouteLeave(
vue列表进入详情页面返回时数据缓存
yanby921005的博客
05-18 6022
1.在app.vue中添加 2.在router.index中添加 3.在列表页面添加
vue中keepAlive页面缓存，详情页返回列表页刷新问题
星辰的笔记
04-26 6616
问题 当我们从列表页面的第二页进入某一项的详情页后 再从详情页返回列表页，此时列表页会刷新回第一页 用户体验极差 需要的效果 返回时仍要回到之前保存的好的页数和筛选条件等 解决 需要缓存的页面则添加keepAlive，不需要缓存的页面则不加 路由 <!-- 缓存的页面 --> <keep-alive> <router-view v-...
vue里如何主动销毁keep-alive缓存的组件
10-17
主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
vue keep-alive 动态删除组件缓存的例子
12-13
业务需求： 切换tab页标签的时候（路由前进的时候），缓存当前组件数据，关闭tab页标签的时候清除组件缓存。 实现： 1、先在store的state里面设置一个要缓存数组 2、在进到子页面的时候，更新...以上这篇vue keep-aliv
vue项目中keep-alive缓存，从详情页返回列表时保存上一步的信息
weixin_34128237的博客
12-20 1840
问题由来 1、最近用vue做前端项目，从查询页面进入详情页时，返回页面需要保留上次的查询条件，表格当前页数。2、从其他菜单进去，不需要缓存，要保持页面的初始状态。基于上面两种情况，我打算用vue中的keep-alive来缓存页面。 问题的解决方法 列表项目 . 用vue的内置组件keep-alive来缓存列表页面，再路由出口渲染组件时配置...
利用sessionStrong浏览器缓存，实现详情页面返回列表页，列表页处于点击时的当前页面
qq_27309221的博客
05-29 421
问题： 这个问题的产生源于运营人员反馈过来的一个需求，因为本次做的网站的新闻中心有公告通知与新闻动态两个大类（标签页控制，同一个页面地址），运营人员在测试使用的时候发现一个问题，当列表处在其它页面并且点击进详情返回列表页时，新闻列表显示的是公告通知第一页的信息…… 解决方案： <p class="title" @click="goDetail(item.guid)">{{item.title}}</p> methods: { getData() { // ...获取数据
vue：监听页面缓存事件
mosowe
04-03 4467
事情的起因是这样的： 项目中需要用到websocket，在网页刚打开的时候，就要进行对话的连接绑定，就我这菜鸟来说，第一次这么搞事情，也是刚接触websocket没多久，这咋整啊？在App.vue中设置了绑定，所有的信息返回都在app.vue组件里面，但是其他组件怎么去获取？而且需要缓存到本地。而当初我还没接触vuex，所以在其他组件里面获取服务器返回的信息只能借助于localStorage，这...
Vue使用keep-alive，调用 $destory() ，页面不再被缓存的解决方法
热门推荐
浩哥
03-18 3万+
需求：项目中需要开发一个导航栏，类似浏览器的导航，没有关闭的时候页面缓存，关掉之后，页面随之销毁。（如图） 项目是使用Vue + Vue-Router + Vuex 刚开始使用的方法是：关闭导航标签，直接调用对应的页面的$destory()方法，OK，可以实现关闭页面（下次再打开该页面，将初始化）的功能，但是遇到个问题： 该页面将不再被缓存，也就是说切换导航tab时，页面将不断的被初始化...
Vue项目中 点击某个选项后进入编辑页面，点击取消/保存/返回时 能够再次返回到点击的地方
qq_38774121的博客
12-25 1万+
Vue项目中 点击某个选项后进入编辑页面，点击取消/保存/返回时 能够再次返回到点击的地方 简介：可以算是记忆功能，记忆上一次点击的地方 解析： 拿最简单的点击取消来举例 首先我先说明一下，我这个页面时循环生成的多个div、 首先在循环的时候绑定一个id，这个id可以是你循环出来的后台数据，也可以是你自定义的数据。 注意：不要使用数字开头 在点击按钮跳转的时候，通过路由，将此id传输过去，同时...
vue使用keep-alive在列表中进入详情页中返回后在进入其他详情页面发现还是上一次的详情，被缓存了如何解决呢
weixin_41277748的博客
03-22 1310
直接写重点：使用keep-alive如果你想页面不仅刷新页面还保存原来的搜索内容，则是要使用activated生命周期函数，那么用在什么地方呢，你在哪个周期函数里面去调用api获取数据的，就把那个周期函数给替换成activated就可以了，一般都是在created和mounted中获取数据，就直接用activated就可以了 ...
vue中的keep-alive页面缓存
zy的博客
02-15 1318
目录 概念 作用 原理 props 生命周期函数   1. activated   2. deactivated 常用的使用方法 使用场景 缓存所有页面 根据条件缓存页面 结合Router，缓存部分页面 概念 keep-alive 是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，...
使用vue内置组件keep-alive事件动态缓存
qq719756146的博客
01-17 550
在App.vue文件中配置 &lt;keep-alive&gt; &lt;router-view v-if="$route.meta.keepAlive"&gt;&lt;/router-view&gt; &lt;/keep-alive&gt; &lt;router-view v-if="!$route.meta.keepAlive"&gt;&lt
解决vue中keep-alive缓存问题
donggua_123的博客
07-04 9829
vue开发的时候，我们经常会有这样的需求：开发一个详细页面来展示商品的详细信息，根据列表页传入的id进行请求，拿到对应的数据进行渲染。但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id这时候可以使用vue的$destroy()方法这是vue...
vue项目实现详情页后退缓存之前的数据
weixin_30307267的博客
05-31 1345
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57不想写代码的程序员阅读数：244 一、需要缓存的内容： 1、后退缓存条件查询的数据 2、后退缓存分页信息 二、实现 通过参考网上搜集的资料知道用keepAlive实现 参考地址：https://blog.csdn.net/sinat_17775997/ar...
vue3清除指定keep-alive缓存
最新发布
03-31
在Vue3中，可以通过使用`<keep-alive>`组件的`include`和`exclude`属性来控制哪些组件需要被缓存，哪些组件需要被清除缓存。 - `include`属性允许您指定哪些组件应该被缓存，可以是一个字符串或一个正则表达式。如果`include`属性被省略，则所有组件都将被缓存。 - `exclude`属性允许您指定哪些组件不应该被缓存，可以是一个字符串或一个正则表达式。 为了清除指定的缓存，可以通过在组件中使用`<keep-alive>`的`exclude`属性来排除需要清除缓存的组件，然后通过修改该组件的`key`属性来强制重新渲染该组件，从而清除该组件的缓存。 例如，假设需要清除一个名为`MyComponent`的组件的缓存，可以在该组件中使用以下代码： ```html <template> <div :key="componentKey"> <!-- 组件内容 --> </div> </template> <script> export default { data() { return { componentKey: 0 } }, mounted() { // 在mounted钩子中修改组件的key属性来强制重新渲染 this.componentKey += 1 }, // 在组件中排除自身不被缓存 // 也可以使用字符串来排除：exclude="MyComponent" // 如果需要排除多个组件，可以使用正则表达式来匹配 // exclude="/(MyComponent|OtherComponent)/" // 如果需要缓存多个组件，可以使用include属性来指定 // include="/(MyComponent|OtherComponent)/" beforeRouteLeave(to, from, next) { if (to.name === 'home') { // 清除缓存，重新渲染组件 this.componentKey += 1 } next() } } </script> ``` 在上面的例子中，使用`componentKey`作为组件的`key`属性，当组件需要重新渲染时，修改该属性的值即可。在`beforeRouteLeave`钩子中，当用户离开该组件并进入名为`home`的路由时，清除该组件的缓存，重新渲染组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

范天缘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值