深入理解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 相关文章推荐
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php随机显示图片的简单示例
2014/02/15 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python中List.count()方法的使用教程
2015/05/20 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
费用会计岗位职责
2014/01/01 职场文书
会计核算科岗位职责
2014/03/19 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技