vue-路由守卫

路由钩子函数 路由守卫

beforRouteEnter 路由进入之前
1、热力图
2、登陆验证
3、权限验证
4、会员 VIP验证
5、验证商品携带信息是否完整

在当前钩子函数中是访问不到this的，因为还没有进入当前组件所以this为undefined
如果需要使用this则需要在next中使用回调,回调中的第一个参数就是组件的实例

beforRouteUpdate 路由更新的时候
当路由发生了改变，但是当前组件没有经历创建和销毁的时候，如果我们需要接收路由传递过来的数据时
我们就需要用到了beforRouteUpdate

beforRouteLeave 路由离开的时候
1、信息没有填写完成
2、答题系统
3、支付
4、退出登陆

全局守卫 全局钩子函数

beforEach 一般情况下用来做一些路由公众部分的验证 登陆验证

router.beforeEach((to, from, next) => {
  if(to.meta.requireAuth){
    next();
  }else{
    if(getCookie("X-TOKEN")){
      next()
    }else{
      next("/login");
    }
  }

})