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封装的对话框简单实现
Jul 21 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python框架django基础指南
2016/09/08 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python__name__原理及用法详解
2019/11/02 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏