vue 的keep-alive缓存功能的实现


Posted in Javascript onMarch 22, 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 = ‘'
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
Paypal支付不完全指北
Jun 04 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 #Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 #Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 #Javascript
vuex 的简单使用
Mar 22 #Javascript
Vue.js中的computed工作原理
Mar 22 #Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 #Javascript
JS中的事件委托实例浅析
Mar 22 #Javascript
You might like
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
JS array 数组详解
2009/03/22 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
python字符串替换示例
2014/04/24 Python
python小技巧之批量抓取美女图片
2014/06/06 Python
python获取标准北京时间的方法
2015/03/24 Python
详解Python中的Cookie模块使用
2015/07/06 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python时间获取及转换知识汇总
2017/01/11 Python
详解Python with/as使用说明
2018/12/13 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
电影圆明园观后感
2015/06/03 职场文书
Python字典的基础操作
2021/11/01 Python