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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
bootstrap table实例详解
Jan 06 Javascript
拖动时防止选中
Feb 03 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
Vue实现随机验证码功能
Dec 29 Vue.js
vue首次渲染全过程
Apr 21 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安装攻略:常见问题解答(一)
2006/10/09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP引用返回用法示例
2016/05/28 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
html读出文本文件内容
2007/01/22 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
js实现分割上传大文件
2016/03/09 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python监控键盘输入实例代码
2018/02/09 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python读写zip压缩文件的方法
2018/08/29 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python实现车牌识别的示例代码
2019/08/05 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
管理提升方案
2014/06/04 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
毕业设计致谢语
2015/05/14 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
python 下划线的多种应用场景总结
2021/05/12 Python