vue keep-alive 动态删除组件缓存的例子


Posted in Javascript onNovember 04, 2019

业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存。

实现:

1、先在store的state里面设置一个要缓存数组

vue keep-alive 动态删除组件缓存的例子

2、在进到子页面的时候,更新store的数组,把将要缓存组件的name(注意:是组件的name,并不是路由的name),装进数组

vue keep-alive 动态删除组件缓存的例子

3、当前组件的route-view,外层包裹keep-alive,include用你从仓库里面取出来的数组

vue keep-alive 动态删除组件缓存的例子

4、关闭标签页(也就是后退路由的时候),清空store里的数组

vue keep-alive 动态删除组件缓存的例子

总结:通过动态的设置include(要缓存的组件)的数组,来动态的控制组件是否缓存

以上这篇vue keep-alive 动态删除组件缓存的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
vue v-model的用法解析
Oct 19 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 #Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 #Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 #Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 #Javascript
element-ui table组件如何使用render属性的实现
Nov 04 #Javascript
You might like
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
fgetcvs在linux的问题
2012/01/15 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
javascript实用方法总结
2015/02/06 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python中实现的RC4算法
2015/02/14 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
WxPython实现无边框界面
2019/11/18 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
SQL面试题
2013/04/30 面试题
业务员岗位职责范本
2013/12/15 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
2014信息公开实施方案
2014/02/22 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
捐资助学感谢信
2015/01/21 职场文书
公司员工离职感言
2015/08/03 职场文书