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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 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
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
linux下python抓屏实现方法
2015/05/22 Python
Python迭代和迭代器详解
2016/11/10 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python中reader的next用法
2018/07/24 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Linux的主要特性
2016/09/03 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
数学系毕业生求职信
2014/05/29 职场文书
员工薪酬激励方案
2014/06/13 职场文书
水电工程师岗位职责
2015/02/13 职场文书
被告代理词范文
2015/05/25 职场文书
生产实习心得体会范文
2016/01/22 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
springboot中的pom文件 project报错问题
2022/01/18 Java/Android