清除keep-alive的缓存

最新推荐文章于 2024-06-01 23:46:08 发布
最新推荐文章于 2024-06-01 23:46:08 发布
阅读量6.7k 收藏 3
点赞数 2
原文链接：http://www.cnblogs.com/jeyhan520/p/7168570.html
版权

最近做项目的时候,遇到一个问题:

从列表选择一个跳到详情页，第一次是没有问题的，返回列表再次选择一个不同的点击详情，数据还是第一次的数据

想了下,因为有的界面需要使用keep-alive缓存,所以导致这个问题.

于是上网搜了下,找到一个解决方法,就是在不需要缓存的组件里加上如下代码:

  deactivated () { //清除keep-alive的缓存
    this.$destroy(true)
  }
deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。

 

转载于:https://www.cnblogs.com/jeyhan520/p/7168570.html

weixin_33827731
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue keep-alive 动态删除组件缓存的例子
10-16
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2中keep-alive页面特定跳转清除缓存
qq_47886158的博客
12-28 790
1、首先在App.js里面，这里是根据route里面meta.keepAlive是否为true来判断是否需要缓存。2、在router.js路由里面meta加上keepAlive，默认可以为有缓存。3、使用路由守卫，判断跳转前的页面（特定页面）name值，修改是否需要缓存。
清除vue的keep-alive的页面内指定页面的缓存
banglei123的博客
09-14 1412
1.需求背景 自定义页面的tab 类似chrome浏览器的标签页页，如图 切换要求为 1、打开的页面切换要保留页面上的数据如：页面的搜索条件选项和表格数据等。 2、关闭页面再打开时需要重新加载页面。 2.出现问题 使用keep-alive 缓存子页面，确实可以达到 需求 1 的要求，但是关闭了这个页面在打开的话页面缓存依然存在。 3.解决方案 1.查找了keep-alive的清除缓存的方案，发现官方并没有提供相关方法。所以先想到的是，重新打开页面链接后面增加一个随机数的参数。但是需要区.
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析，超详细！
最新发布
共同学习，共同成长
06-01 1834
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇讲解Keep-Alive缓存组件使用语法及原理解析，超详细！
Vue keep-alive组件的使用以及清除缓存的方法
小潘潘的博客
07-11 4110
【代码】Vue keep-alive组件的使用以及清除缓存的方法。
keep-alive清除缓存
HuaCHen_SHan的博客
06-30 4158
vue: keep-alive清除缓存
Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存
wocwin的博客
04-10 1432
Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存
如何清除keep-alive缓存
dxn16638400024的博客
03-09 1561
这些方法可以根据具体的需求来选择使用，如果需要在代码中动态地控制组件的缓存和销毁，建议使用第二种方法；如果需要在组件内部手动触发清除缓存，可以使用第一种方法。组件可以将组件保留在内存中，以避免重复渲染和销毁，从而提高性能。然后，在需要清除缓存的时候调用。在 Vue.js 中，使用。
清除keep-alive缓存，动态缓存
weixin_36989551的博客
08-19 3140
动态添加keep-alive 清除keep-alive缓存
vue 路由带参数跳转，页面有缓存,问题的解决方法
aiiit的博客
12-06 4281
一.vue 路由带参数跳转，页面有缓存,问题的解决方法 a.从mv点击到mv详情页，第一次是没有问题的，返回列表再次选择一个不同的mv点击详情，数据还是第一次的数据 <template> <div @click="mvHandle(item.id)"></div> </template> <script> export default { name:'MvList', data(){ return{ } }, met
vue手动清除keep-alive中的缓存
baidu_41677887的博客
07-13 8075
当我们在项目中使用tagView切换拦的时候，意味着我们需要缓存出现的页面 利用keep-alive的include，新打开标签时，把当前组件名加入到include数组里，关闭标签时从数组中删除关闭标签的组件名就可以了 首先，keep-alive组件的include是可以绑定匹配名字的组件，匹配的组件将会被缓存，所以我们可以动态的在vuex里面绑定一个缓存。 打开的vue调试工具窗口查看vuex里面的值，这里我使用cachedViews去存储vue需要缓存的组件，这个值是组件的name值而不是路由nam
vuex + keep-alive实现tab标签页面缓存功能
10-16
"vuex + keep-alive" 的组合就能很好地满足这一需求，通过缓存页面数据，使用户在切换Tab时无需重新加载数据，提升用户体验。 `keep-alive` 是Vue提供的一个内置组件，它能够将组件的状态进行缓存，当组件再次被...
umi-plugin-keep-alive:用于基于React激活的umijs
05-13
umi-plugin-keep-alive 中文说明 | 此 <KeepAlive> 功能基于 在线示例 umi 多 tabs 示例： 使用方法 安装 npm install umi-plugin-keep-alive --save # or yarn add umi-plugin-keep-alive 从 umi 中导出 KeepAlive...
vue的keep-alive用法技巧
10-16
在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。
vue keep-live使用
Xiang_Gong_Ya_的博客
05-31 994
vue keep-live使用 今天，帮别人解决了一个问题，就是做vue电商项目时，请求分类数据，第二次进入分类页数据缓存了，上一次的数据也在页面中出现。 解决思路 首先，判断数据没有清空。 因为，数据一定进行了缓存。 知道问题，就找到问题发生的地方。 排除 // 引入持久化插件，刷新数据不丢失 import forover from ‘vuex-persistedstate’ 持久化插件没问题 最后，app.vue的keep-live使用错误 解决： <router-view v-if="!$rou
手动清除keep-alive缓存
sunmeng0109的博客
06-30 3228
手动清除keep-alive缓存
linux mv输出详细信息,linux中的mv命令的详细解释
weixin_35765225的博客
05-06 680
linxu下的mv命令是一个常用命令，可以为文件或者目录重命名，下面由学习啦小编为大家整理了linux的mv命令的详细解释的相关知识，希望对大家有帮助!一、linux中的mv命令的详细解释Linux mv命令用来为文件或目录改名、或将文件或目录移入其它位置。语法mv [options] source destmv [options] source... directory参数说明：-i: 若指定目...
动态清除keep-alive引发的缓存
温壁
06-12 7992
//APP.vue中 <keep-alive :include="keepAlive"> <router-view></router-view> </keep-alive> //vuex中 state:{ keepAlive:[] }, mutations:{ changeKeepAlive_:(state,keepAl...
vue的keep-alive组件清除缓存
风雪夜过客的博客
01-16 8552
场景是，从列表跳转到详情页，再次返回列表页时要记住之前列表页的页码、搜索关键词等，采用keepa-live缓存组件。 在路由文件配置meta.keepAlive: { path: '/List', name: 'List', component: List, meta: { keepAlive: true } } 修改App.vue的router-view： <keep...
vue3清除keep-alive缓存
03-31
在 Vue3 中，可以通过`<keep-alive>`组件的`include`和`exclude`属性来控制缓存的组件，具体实现如下： 1. 在需要清除缓存的组件上，添加一个唯一的`key`属性，例如： ```html <template> <div :key="componentKey">需要清除缓存的组件</div> </template> <script> export default { data() { return { componentKey: 0 } }, methods: { // 点击按钮，更新 componentKey，清除缓存 updateKey() { this.componentKey++ } } } </script> ``` 2. 在`<keep-alive>`组件中，设置`include`或`exclude`属性来控制缓存的组件，例如： ```html <template> <keep-alive :include="includeList" :exclude="excludeList"> <router-view /> </keep-alive> </template> <script> export default { computed: { includeList() { // 需要缓存的组件名称列表 return ['ComponentA', 'ComponentB'] }, excludeList() { // 需要清除缓存的组件名称列表 return ['ComponentC'] } } } </script> ``` 当需要清除缓存时，调用组件的`updateKey`方法即可。这样，组件的`key`会更新，被排除在缓存之外，再次进入时会重新加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值