Vue手把手教你撸一个 beforeEnter 钩子函数

 更新时间:2018年04月24日 10:17:08   作者:超神Code  
这篇文章主要介绍了Vue手把手教你撸一个 beforeEnter 钩子函数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

为什么要自造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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    Vue.js 实现微信公众号菜单编辑器功能(一)

    最近vue.js 非常火热,小编也趁机学习了下vuejs的一些基础知识,于是尝试做一个像微信平台里的菜单编辑器功能,下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家,需要的朋友参考下
    2018-05-05
  • Vue transition实现点赞动画效果的示例

    Vue transition实现点赞动画效果的示例

    点赞动画是网页评论中常见的功能,本文将介绍如何用vue实现这一效果。点赞时爱心缩小变大,变大时略微大一点再变正常,取消点赞时爱心无动画,同时数字滚动,+1 时向上滚动,-1 时向下滚动
    2021-05-05
  • vue模仿网易云音乐的单页面应用

    vue模仿网易云音乐的单页面应用

    这篇文章主要介绍了vue仿网易云音乐的单页面应用实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 在Vue中使用this.$store或者是$route一直报错的解决

    在Vue中使用this.$store或者是$route一直报错的解决

    今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中关闭eslint的方法分析

    vue中关闭eslint的方法分析

    这篇文章给大家讲述了vue中关闭eslint的方法内容,有需要的读者们可以参考学习下。
    2018-08-08
  • 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码

    本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vue中Echarts使用动态数据的两种实现方式

    vue中Echarts使用动态数据的两种实现方式

    这篇文章主要介绍了vue中Echarts使用动态数据的两种实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue forEach循环数组拿到自己想要的数据方法

    vue forEach循环数组拿到自己想要的数据方法

    今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue路由切换的两种方式示例详解

    Vue路由切换的两种方式示例详解

    这篇文章主要介绍了Vue路由切换的两种方式,主要包括标签切换和js切换,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 基于vue-cli3多页面开发apicloud应用的教程详解

    基于vue-cli3多页面开发apicloud应用的教程详解

    这篇文章主要介绍了基于vue-cli3多页面开发apicloud应用,本文采用vue-cli+APIcloud的方式写解决以上痛点,开发灵活,并且打包之后体积更小速度更快,需要的朋友可以参考下
    2019-06-06

最新评论