关于Vue实现组件信息的缓存问题


Posted in Javascript onAugust 23, 2017

当我们在开发vue的项目过程中,避免不了在路由切换到其他component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载。

在app.vue里

<keep-alive>
  <router-view></router-view>
</keep-alive>

但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果。

那么我们给部分组件加上,实现方法如下:

在app.vue里

<!-- 这里是需要keepalive的 -->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

然后在设置路由信息的时候这样

{
 path: '',
 name: '',
 component: ,
 meta: {keepAlive: true} // 这个是需要keepalive的
},
{
 path: '',
 name: '',
 component: ,
 meta: {keepAlive: false} // 这是不会被keepalive的
}

这就实现部分组件缓存的功能

如果缓存的组件想要清空数据或者执行初始化方法,在加载组件的时候调用activated钩子函数,如下:

activated: function () {
  this.data = '';
}

总结

以上所述是小编给大家介绍的关于Vue实现组件信息的缓存问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
详解webpack进阶之loader篇
Aug 23 #Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 #Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 #Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 #Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 #Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 #Javascript
vue中页面跳转拦截器的实现方法
Aug 23 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
js控制input输入字符解析
2013/12/27 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
VUE实现吸底按钮
2021/03/04 Vue.js
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
应届生个人求职信模板
2013/11/26 职场文书
大学运动会入场词
2014/02/22 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
企业授权委托书范本
2014/04/02 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
职工宿舍管理制度
2015/08/05 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
python百行代码实现汉服圈图片爬取
2021/11/23 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS