深入理解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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
浅析JS运动
Dec 28 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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
IStream与TStream之间的相互转换
2008/08/01 PHP
php中动态调用函数的方法
2015/03/16 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
javascript每日必学之继承
2016/02/23 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
详解python:time模块用法
2019/03/25 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
自我评价范文点评
2013/12/04 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
薪资证明范本
2015/06/19 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书