欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-14 10:53:11
为什么要自造beforeenter钩子函数? 看下问题场景:项目中有一单词列表页面,每个cell都会备注该单词是否已经掌握,点击cell进入详情页,可对该单词进行学习...

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

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