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 相关文章推荐
js DOM模型操作
Dec 28 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
Vue项目接入Paypal实现示例详解
Jun 04 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中的数组操作函数整理
2008/08/18 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
浅析javascript的return语句
2015/12/15 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python读写压缩文件的方法
2020/07/30 Python
Python字符串及文本模式方法详解
2020/09/10 Python
python如何实现图片压缩
2020/09/11 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
Python项目打包成二进制的方法
2020/12/30 Python
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
Shell编程面试题
2012/05/30 面试题
大学生学业生涯规划
2014/01/05 职场文书
综治宣传月活动总结
2014/04/28 职场文书
业务内勤岗位职责
2014/04/30 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
解除施工合同协议书
2014/10/17 职场文书
大学生求职信怎么写
2015/03/19 职场文书
创业计划书之水果店
2019/07/18 职场文书