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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP面向对象编程快速入门
2006/10/09 PHP
php权重计算方法代码分享
2014/01/09 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
Use Word to Search for Files
2007/06/15 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python多线程下信号处理程序示例
2019/05/31 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
暑期培训随笔感言
2014/03/10 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
Linux中sftp常用命令整理
2022/06/28 Servers