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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
koa-router源码学习小结
Sep 07 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
利用PHP动态生成VRML网页
2006/10/09 PHP
php简单的会话类代码
2011/08/08 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python守护进程用法实例分析
2015/06/04 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
python爬取代理ip的示例
2020/12/18 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技