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 相关文章推荐
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 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+memcache实现消息队列案例分享
2014/05/21 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
分页栏的web标准实现
2011/11/01 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python 同时读取多个文件的例子
2019/07/16 Python
Django 拆分model和view的实现方法
2019/08/16 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
java关于string最常出现的面试题整理
2021/01/18 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
优秀应届生推荐信
2013/11/09 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL