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.validate的使用说明介绍
Nov 12 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
js实现select下拉框选择
Jan 11 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
angular4实现带搜索的下拉框
Mar 25 Javascript
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 session和cookie使用说明
2010/04/07 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
文字幻灯片
2006/06/26 Javascript
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
Js组件的一些写法
2010/09/10 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
js转义字符介绍
2013/11/05 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
Python实现批量压缩图片
2018/01/25 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
经济信息系毕业生自荐信范文
2014/03/15 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
乳制品整治工作方案
2014/05/29 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python