深入理解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 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP与SQL注入攻击[三]
2007/04/17 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
nodejs教程之入门
2014/11/21 NodeJs
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
js实现抽奖的两种方法
2020/03/19 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python实现数据库编程方法详解
2015/06/09 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python定义一个函数的方法
2020/06/15 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
师说教学反思
2014/02/07 职场文书
战友聚会主持词
2014/04/02 职场文书
精神文明建设标语
2014/06/16 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server