一、写在前面
之前对于vue-router的路由导航守卫不是很清楚，今天总结一下，并且总结一下执行的顺序。
二、vue-router
2.1、全局守卫——beforeEach

router.beforeEach((to, from, next) => {
  console.log(to)
  console.log(from)
  next()
})

beforeEach在每一次导航之前都会触发，此时的to指的是将要跳转到的路由地址，from指的是从哪一个路由地址跳转的，next表示跳转方法。
2.2、全局导航守卫——beforeResolve

router.beforeResolve((to, from, next) => {
  console.log(to)
  console.log(from)
  next()
})

router.beforeResolve是全局导航守卫，类似于beforeEach。
2.3、全局导航守卫——afterEach()

router.afterEach((to, from) => {
  console.log(to)
  console.log(from)
})

afterEach表示导航之后，此时回调函数中只存在两个参数，一个是to,另一个是from。
2.4、路由导航守卫

{
    path: "/about",
    component: About,
    beforeEnter: (to, from, next) => {
      console.log(to)
      console.log(from)
      next()
}

该路由守卫放在路由对象上，参数包括,to,from,next
2.5、组件导航守卫——beforeRouteEnter

<script>
export default {
  name: "About",
  beforeRouteEnter(to, from, next) {
    console.log(to);
    console.log(from);
    next();
  },
};
</script>

可以在组件的options api中设置相关的方法，其中存在三个参数，to, from,next,因为在进入组件之前，所以此时的this为undefined
2.6、组件导航守卫——beforeRouteUpdate

export default {
  name: "About",
  beforeRouteUpdate(to, from) {
    console.log("🚀🚀~ beforeRouteUpdate");
  },
};

当前路由改变，但是该组件仍然被复用是触发，并且此时可以访问其中的this。
2.7、组件导航守卫——beforeRouteLeave

<script>
export default {
  name: "About",
  beforeRouteLeave (to, from, next) {
    console.log(to)
    console.log(from)
    console.log(this)
    next()
  }
};
</script>

beforeRouteLeave可以传入三个参数，一个是to,另一个是from,第三个是next,并且在其中可以访问到this。