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 相关文章推荐
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
js实现div色块碰撞
2020/01/16 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Python实现带百分比的进度条
2016/06/28 Python
python实现下载文件的三种方法
2017/02/09 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
工商管理自荐书
2014/07/06 职场文书
创优争先心得体会
2014/09/11 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
建筑工地文明标语
2014/10/09 职场文书
产品调价通知函
2015/04/20 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
首次购房证明
2015/06/19 职场文书
公司行政管理制度范本
2015/08/05 职场文书
早安问候语大全
2015/11/10 职场文书
求职信如何撰写?
2019/05/22 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
python基础之类属性和实例属性
2021/10/24 Python