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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 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
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
js判断是否是手机页面
2017/03/17 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Python 解析xml文件的示例
2020/09/29 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
工程专业求职自荐书范文
2014/02/18 职场文书
酒店管理求职信范文
2014/04/06 职场文书
房屋出租协议书
2014/04/10 职场文书
询价采购方案
2014/06/09 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL