vue路由守卫

Posted 2021-06-04 Jmytea

vue路由守卫

组件实例中的守卫，以及在更新组件的调用顺序

// 路由调用组件前
  beforeRouteEnter(to, from, next) {
    console.log("home beforeRouteEnter.....");
    //在这个函数中，还不能操作this
    console.log(this);

    // 只有在beforeRouteEnter这个守卫函数中，才可以对next传入一个函数
    next((homeComponent)=>{
      console.log('next......');
      // 在next的回调函数中，也不可以操作this
      // 但是这个函数是在所有守卫被确认之后，并且组件被调用之后执行。
      // 当前的组件对象会作为参数传入。
      console.log(this);
      console.log(homeComponent);
      homeComponent.message = 'hi!';
    });
  },
  // 路由更新组件前
  beforeRouteUpdate(to, from, next) {
    console.log("home beforeRouteUpdate....");
    next();
  },
  // 路由离开组件前
  beforeRouteLeave(to, from, next) {
    console.log("home beforeRouteLeave....");
    next(false);
  },

    // 路由独享守卫
    beforeEnter(to, from, next){
      console.log('home beforeEnter....');
      next();
    }
// 全局守卫，前置守卫
router.beforeEach((to, from, next)=>{
  console.log('beforeEach1....');

  // console.log(to);//this.$route
  // console.log(from);

  // 方式1:
  // next();//进入
  // 方式2:
  // next(false);//阻止进入
  // 方式3:
  // if(to.name === 'About'){
  //   // next('/');//重定向
  //   next({name: 'Home'});//重定向
  // }else{
  //   next();
  // }

  next();
})