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 相关文章推荐
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 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多图上传小程序代码
2011/07/17 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
django 按时间范围查询数据库实例代码
2018/02/11 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
项目合作意向书范本
2014/04/01 职场文书
企业法人授权委托书
2014/04/03 职场文书
2014年除四害工作总结
2014/12/06 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
使用scrapy实现增量式爬取方式
2022/06/21 Python