vue 路由守卫

vue-router

路由守卫

当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫

• 组件内守卫
• 路由独享守卫
• 全局守卫

组件内守卫

定义在组件内的与路由有关的生命周期函数（守卫）

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

beforeRouteEnter

当路由解析完成，并中指定的组件渲染之前（组件 beforeCreate 之前），不能这里通过 this 访问组件实例，需要通过 next 回调来进行调用

beforeRouteEnter (to, from, next) {
   
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  	next(vm => {
   
      // vm...
    })