关于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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
javascript json 新手入门文档
Dec 03 Javascript
js 函数的副作用分析
Aug 23 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
React如何避免重渲染
Apr 10 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
微信小程序登录session的使用
Mar 17 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
长波有什么东西
2021/03/01 无线电
PHP7 echo和print语句实例用法
2019/02/15 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
javascript实现画板功能
2020/04/12 Javascript
python显示天气预报
2014/03/02 Python
Python闭包实现计数器的方法
2015/05/05 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
银行领导证婚词
2014/01/11 职场文书
党的生日活动方案
2014/08/15 职场文书
村委会贫困证明范本
2014/09/17 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
高中班主任评语
2014/12/30 职场文书
大学教师个人总结
2015/02/10 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
房租涨价通知
2015/04/23 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
手把手教你导入Go语言第三方库
2021/08/04 Golang