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

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

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()
  }
  
})

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() {}
};

import beforeEnterMixin from '@/libs/beforeEnterMixin';
Vue.mixin(beforeEnterMixin);

<template>
  <div>
    首页
  </div>
</template>
<script>
export default {
  beforeEnter() {
    console.log('首页 beforeEnter...');
  },
  created() {
    console.log('首页 created...')
  }
}
</script>