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 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 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
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python实现两个文件夹的同步
2019/08/29 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
奥巴马竞选演讲稿
2014/05/15 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
交通工程专业推荐信
2014/09/06 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python