vue路由守卫

全局前置守卫

全局前置守卫，组件初始化时调用，每次路由切换之前调用，路由切换之前指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。

全局前置守卫
router.beforeEach(function (to, from, next) {
    //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
    //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
    //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
    //to 要去的路由地址  from 从那个地址过来的  next() 可以跳转  next('url') 跳转到指定地址
    console.log(from);
    next(); //完成跳转
})

全局后置守卫

全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。

全局后置路由守卫
router.afterEach(function (to, from) {
    //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
    //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
    console.log(from, to);
})

独享守卫

组件独享守卫是在进入组件时被调用,区别就在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由

独享守卫
beforeEnter: (to, from, next) => {
    //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
    //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
    //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
    console.log(to);
    next();
}

组件内守卫

当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，而组件内守卫的作用于范围也仅限于该组件

export default {
  beforeCreate() {
    console.log("创建之前");
  },
  //组件内守卫-进入之前
  beforeRouteEnter(to, from, next) {
    console.log("路由进入之前");
    next();
  },
  //组件内守卫-离开之前
  beforeRouteLeave(to, from, next) {
    console.log("路由离开之前");
    next();
  },
  beforeDestroy() {
    console.log("销毁");
  },
  //组件内守卫-路由更新 (子路由或路由参数的变化)
  beforeRouteUpdate() {},
};

     执行顺序

        路由进入之前--创建之前--路由离开之前--销毁