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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
一文了解Vue中的nextTick
May 06 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 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
十大“创意”战术!
2020/03/04 星际争霸
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
PHP $_FILES函数详解
2011/03/09 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
一个js控制的导航菜单实例代码
2013/12/03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
2014年学习雷锋活动总结
2014/03/01 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
工作简报范文
2015/07/21 职场文书
2015元旦感言
2015/12/09 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript