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检测函数
May 31 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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/10/09 PHP
解析php中memcache的应用
2013/06/18 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
围观tangram js库
2010/12/28 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Django中cookie的基本使用方法示例
2018/02/03 Python
Python闭包函数定义与用法分析
2018/07/20 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python闭包思想与用法浅析
2018/12/27 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
Exception类的常用方法
2012/06/16 面试题
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
靠谱的活动总结
2019/04/16 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
MySQL 语句执行顺序举例解析
2022/06/05 MySQL