Vue手把手教你撸一个 beforeEnter 钩子函数


Posted in Javascript onApril 24, 2018

为什么要自造beforeEnter钩子函数?

看下问题场景:项目中有一单词列表页面,每个cell都会备注该单词是否已经掌握,点击cell进入详情页,可对该单词进行学习,并标记单词是否掌握,并且在详情页面中也可以通过点击前进 后退 按钮学习其他的单词。所以但我点击返回时,单词列表要展示所有单词用户掌握的最新情况。

最终的页面关系是这样的:

​ wordListPage ——> wordDetail (对一系列单词进行学习,退出)——> wordListPage(刷新单词列表)

对于上面的场景,使用Vue生命周期函数是不行的,因为Vue的生命周期函数如:beforeCreate 、created、beforeMounted、mounted等,只有在组件初始化的时候才会被调用,但是当组件(VM实例)来自于缓存(如$route.go(-1) 、keep-alive)中时,生命周期函数将不会再被调用。因此,当我从单词详情页面返回至列表页面时,找不到一个恰当的时期去出发数据更新。所以上面的场景也就无法很好的去做处理。

当然,对于上面的场景是比较少的,但是beforeEnter钩子函数的存在还是有必要的。

构造beforeEnter钩子函数

依赖知识点:

  1. 路由:vue-router  
  2. 混入:mixin  
  3. 中央事件总线

1.创建一个中央事件总线

对于中央事件总线,简单理解,就是创建一个公共Vue实例(EventBus),在不同的地方使用相同实例触发EventBus.$emit('demo') 消息,在想要监听事件的位置使用公共Vue实例进行监听EventBus.$on('demo',() => {})。再说白点,就是有这么一个公共组件,它会再不同的地方发消息,又在不同的地方自己去监听消息。所以说消息的发送和接收都是它自己实现的,所以说我们称之为中央事件总线。

代码如下:libs/EventBus.js

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

下面看下怎么使用

2.路由钩子函数beforeEach

通过beforeEach钩子函数,实现路由切换时触发相应组件的beforeEnter事件。

代码如下:router/index.js

import EventBus from '@/libs/EventBus';

router.beforeEach((to, from, next) => {
  //如:EventBus.$emit('homeBeforeEnter');
  EventBus.$emit(to.name + 'BeforeEnter');
  
  if (to.matched.some(route => route.meta.isAuth)) {
    ...
    next()
  } else {
    next()
  }
  
})

3.创建全局混入对象

这里实现路由切换事件的监听和组件实例钩子函数beforeEnter的触发。

libs/beforeEnterMixin.js

import EventBus from './EventBus';

export default {
  beforeCreate() {
    //获取当前路由名称,与前面使用to.name对应
    let vmName = this.$route.name;
    if (!vmName) {
      return;
    }
    // 当组件初始化时,先触发一次,后续将不再调用
    this.$options.beforeEnter();
    const beforeEnter = vmName + 'BeforeEnter';
    //监听路由切换时触发的...BeforeEnter事件
    //通过this.$options获取到实例中的beforeEnter钩子函数
    //监听到...BeforeEnter事件后,触发钩子函数beforeEnter调用
    EventBus.$on(beforeEnter, this.$options.beforeEnter);
  },
  //该函数在这里只作为占位,没有实际意义
  beforeEnter() {}
};

对于该混入对象,使用全局或者局部混入都是可行的。

全局混入:main.js

import beforeEnterMixin from '@/libs/beforeEnterMixin';
Vue.mixin(beforeEnterMixin);

4.在组件中的使用

如:home.vue

<template>
  <div>
    首页
  </div>
</template>
<script>
export default {
  beforeEnter() {
    console.log('首页 beforeEnter...');
  },
  created() {
    console.log('首页 created...')
  }
}
</script>

至此,我们的 beforeEnter 就完成了,可以做个demo自己测试下,目前本人在项目比较多的地方都会用到它。

在此附上以上代码的demo链接:https://github.com/chaoshenr/Vue-beforeEnter

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
js 图片转base64的方式(两种)
Apr 24 #Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 #Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 #Javascript
vue webpack实用技巧总结
Apr 24 #Javascript
浅谈vue中.vue文件解析流程
Apr 24 #Javascript
vue-cli2.9.3 详细教程
Apr 23 #Javascript
vue.js数据绑定操作详解
Apr 23 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PDO::_construct讲解
2019/01/27 PHP
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
详解python调度框架APScheduler使用
2017/03/28 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
内勤主管岗位职责
2014/04/03 职场文书
公司承诺书范文
2014/05/19 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
门卫管理制度范本
2015/08/05 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书