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 base64编码实现代码
Dec 02 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
vue实现下拉菜单树
Oct 22 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写出自己的BLOG系统 2
2010/04/12 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
webpack多页面开发实践
2017/12/18 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python查看数据类型的方法
2019/10/12 Python
python argparser的具体使用
2019/11/10 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python双链表原理与实现方法详解
2020/02/22 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
技能竞赛活动方案
2014/02/21 职场文书
《画家乡》教学反思
2014/04/22 职场文书
出国留学担保书
2014/05/20 职场文书
大专学生求职信
2014/07/04 职场文书
村党建工作汇报材料
2014/11/02 职场文书
护士求职简历自我评价
2015/03/10 职场文书
户外亲子活动总结
2015/05/08 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
《为人民服务》教学反思
2016/02/20 职场文书