深入理解vue-router之keep-alive


Posted in Javascript onAugust 31, 2017

本文基于 Vue2.0

keep-alive 简介

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

用法也很简单:

<keep-alive>
 <component>
  <!-- 该组件将被缓存! -->
 </component>
</keep-alive>

props

  • include - 字符串或正则表达,只有匹配的组件会被缓存
  • exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
// 组件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}
<keep-alive include="a">
 <component>
  <!-- name 为 a 的组件将被缓存! -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
 <component>
  <!-- 除了 name 为 a 的组件都将被缓存! -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染

遇见 vue-router

router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存:

<keep-alive>
  <router-view>
    <!-- 所有路径匹配到的视图组件都会被缓存! -->
  </router-view>
</keep-alive>

然而产品汪总是要改需求,拦都拦不住...

问题

如果只想 router-view 里面某个组件被缓存,怎么办?

  • 使用 include/exclude
  • 增加 router.meta 属性

使用 include/exclude

// 组件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}
<keep-alive include="a">
  <router-view>
    <!-- 只有路径匹配到的视图 a 组件会被缓存! -->
  </router-view>
</keep-alive>

exclude 例子类似。

缺点:需要知道组件的 name,项目复杂的时候不是很好的选择

增加 router.meta 属性

// routes 配置
export default [
 {
  path: '/',
  name: 'home',
  component: Home,
  meta: {
   keepAlive: true // 需要被缓存
  }
 }, {
  path: '/:id',
  name: 'edit',
  component: Edit,
  meta: {
   keepAlive: false // 不需要被缓存
  }
 }
]
<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件,比如 Home! -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>

优点:不需要例举出需要被缓存组件名称

【加盐】使用 router.meta 拓展

假设这里有 3 个路由: A、B、C。

需求:

  • 默认显示 A
  • B 跳到 A,A 不刷新
  • C 跳到 A,A 刷新

实现方式

在 A 路由里面设置 meta 属性:

{
  path: '/',
  name: 'A',
  component: A,
  meta: {
    keepAlive: true // 需要被缓存
  }
}

在 B 组件里面设置 beforeRouteLeave:

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
     // 设置下一个路由的 meta
    to.meta.keepAlive = true; // 让 A 缓存,即不刷新
    next();
  }
};

在 C 组件里面设置 beforeRouteLeave:

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 让 A 不缓存,即刷新
    next();
  }
};

这样便能实现 B 回到 A,A 不刷新;而 C 回到 A 则刷新。

总结

路由大法不错,不需要关心哪个页面跳转过来的,只要 router.go(-1) 就能回去,不需要额外参数。

然而在非单页应用的时候,keep-alive 并不能有效的缓存了= =

参考

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

Javascript 相关文章推荐
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 #Javascript
浅谈express 中间件机制及实现原理
Aug 31 #Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 #Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 #Javascript
Angular2 http jsonp的实例详解
Aug 31 #Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 #Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP关联数组的10个操作技巧
2013/01/21 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
数学专业推荐信范文
2013/11/21 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
贷款委托书怎么写
2014/08/02 职场文书
房产证明范本
2015/06/19 职场文书
社区干部培训心得体会
2016/01/06 职场文书