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 相关文章推荐
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
vue实现计步器功能
Nov 01 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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和XSL stylesheets转换XML文档
2006/10/09 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript 函数式编程
2007/08/16 Javascript
js 字符串操作函数
2009/07/25 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
原生JS实现留言板功能
2020/02/08 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python excel和yaml文件的读取封装
2021/01/12 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
为什么要有struct关键字
2012/05/08 面试题
关于Java finally的面试题
2016/04/27 面试题
英文版银行求职信
2013/10/09 职场文书
在职研究生自我鉴定
2013/10/16 职场文书
售后服务承诺书
2014/03/26 职场文书
体育专业自荐书
2014/05/29 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2016七夕情人节感言
2015/12/09 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android