深入理解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中绑定事件的命名空间详解
Apr 05 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
下拉框select的绑定示例
Sep 04 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP实现货币换算的方法
2014/11/29 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python创建日历实例
2014/08/21 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Final类有什么特点
2012/04/25 面试题
医学生毕业自我鉴定
2014/03/26 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
python基于tkinter制作下班倒计时工具
2021/04/28 Python