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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
vue实现文字加密功能
Sep 27 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
删除无限级目录与文件代码共享
2006/07/12 PHP
php调用mysql存储过程
2007/02/14 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP chop()函数讲解
2019/02/11 PHP
js类 from qq
2006/11/13 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python打开网页和暂停实例
2014/09/30 Python
python实现获取Ip归属地等信息
2016/08/27 Python
django Serializer序列化使用方法详解
2018/10/16 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
优秀员工评语
2014/02/10 职场文书
爱耳日活动总结
2014/04/30 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
会计简历自我评价
2015/03/10 职场文书
2015年检验科工作总结
2015/04/27 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书