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 学习点滴记录
Apr 24 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
js中如何完美的解析数据
Mar 18 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 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
桌面中心(一)创建数据库
2006/10/09 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
Python Socket使用实例
2017/12/18 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
简历中自我评价分享
2013/10/09 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
高三毕业评语
2014/12/31 职场文书
上甘岭观后感
2015/06/10 职场文书
雷锋的故事观后感
2015/06/10 职场文书
趣味运动会口号
2015/12/24 职场文书
心理学培训心得体会
2016/01/22 职场文书
windows安装python超详细图文教程
2021/05/21 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js
python标准库ElementTree处理xml
2022/05/20 Python