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限制文本框只能输入数字和字母方法
Feb 28 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 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如何获取文件的扩展名
2015/10/28 PHP
Yii框架安装简明教程
2020/05/15 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
JavaScript闭包详解
2015/02/02 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
12步教你理解Python装饰器
2016/02/25 Python
详谈python read readline readlines的区别
2017/09/22 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
热门专业求职信
2014/05/24 职场文书
精神文明建设标语
2014/06/16 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
财产分割协议书范本
2014/11/03 职场文书
公司会议开幕词
2015/01/29 职场文书
单位接收函范文
2015/01/30 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android