深入理解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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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
网站当前的在线人数
2006/10/09 PHP
php获得当前的脚本网址
2007/12/10 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
javascript 面向对象编程基础:封装
2009/08/21 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Vue列表渲染的示例代码
2018/11/01 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python实现各进制转换的总结大全
2017/06/18 Python
python中 logging的使用详解
2017/10/25 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python初学者常见错误详解
2019/07/02 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python字符串的index和find的区别详解
2020/06/20 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
美容院营销方案
2014/03/05 职场文书
党员承诺书内容
2014/03/26 职场文书
财务检查整改报告
2014/11/06 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
移除Selenium中window.navigator.webdriver值
2022/06/10 Python