这次给大家带来使用beforeenter钩子函数（附代码），使用beforeenter钩子函数（的注意事项有哪些，下面就是实战案例，一起来看一下。
为什么要自造beforeenter钩子函数？
看下问题场景：项目中有一单词列表页面，每个cell都会备注该单词是否已经掌握，点击cell进入详情页，可对该单词进行学习，并标记单词是否掌握，并且在详情页面中也可以通过点击前进 后退 按钮学习其他的单词。所以但我点击返回时，单词列表要展示所有单词用户掌握的最新情况。
最终的页面关系是这样的：
wordlistpage ——> worddetail （对一系列单词进行学习，退出）——> wordlistpage（刷新单词列表）
对于上面的场景，使用vue生命周期函数是不行的，因为vue的生命周期函数如：beforecreate 、created、beforemounted、mounted等，只有在组件初始化的时候才会被调用，但是当组件（vm实例）来自于缓存（如$route.go(-1) 、keep-alive）中时，生命周期函数将不会再被调用。因此，当我从单词详情页面返回至列表页面时，找不到一个恰当的时期去出发数据更新。所以上面的场景也就无法很好的去做处理。
当然，对于上面的场景是比较少的，但是beforeenter钩子函数的存在还是有必要的。
构造beforeenter钩子函数
依赖知识点：
路由：vue-router
混入：mixin
中央事件总线
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>  <p>    首页  </p></template><script>export default {  beforeenter() {    console.log('首页 beforeenter...');  },  created() {    console.log('首页 created...')  }}</script>
至此，我们的 beforeenter 就完成了，可以做个demo自己测试下，目前本人在项目比较多的地方都会用到它。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用vue+webpack做出异步加载
vue router动态路由操作子路由
以上就是使用beforeenter钩子函数（附代码）的详细内容。