vue 中的keep-alive实例代码


Posted in Javascript onJuly 20, 2018

Vue 实现组件信息的缓存

当我们在开发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>

二、 在路由的index.js页面里

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

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

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

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

总结

以上所述是小编给大家介绍的vue 中的keep-alive实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
Angularjs实现页面模板清除的方法
Jul 20 #Javascript
搭建vue开发环境
Jul 19 #Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 #Javascript
js调用设备摄像头的方法
Jul 19 #Javascript
微信小程序定位当前城市的方法
Jul 19 #Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 #Javascript
You might like
PHP XML备份Mysql数据库
2009/05/27 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php 删除cookie方法详解
2014/12/01 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
jquery cookie的用法总结
2013/11/18 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
js判断是否是手机页面
2017/03/17 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python日期操作学习笔记
2008/10/07 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
如何基于python实现不邻接植花
2020/05/01 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python3跳出一个循环的实例操作
2020/08/18 Python
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
政风行风评议个人心得体会
2014/10/29 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2016年元旦寄语
2015/08/17 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL