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入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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 可阅读随机字符串代码
2010/05/26 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
复习Python中的字符串知识点
2015/04/14 Python
Python运算符重载用法实例分析
2015/06/01 Python
Pytorch的mean和std调查实例
2020/01/02 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
合作经营协议书范本
2014/04/17 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
先进基层党组织材料
2014/12/25 职场文书
美丽的大脚观后感
2015/06/03 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书