关于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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
php中require和require_once的区别说明
2014/02/27 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP中each与list用法分析
2016/01/08 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
Python常用模块介绍
2014/11/21 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
django模板结构优化的方法
2019/02/28 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
为什么要使用servlet
2016/01/17 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
员工自我鉴定
2013/10/09 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
学习党代会心得体会
2014/09/05 职场文书
自我推荐信怎么写
2015/03/24 职场文书
机器人瓦力观后感
2015/06/12 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书