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

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