vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。

导航守卫有三个类型，分别是全局的钩子（针对整个路由器实例），单个路由对象的钩子和组件内的钩子。

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});
//全局前置守卫
router.beforeEach((to, from, next) => {
});
// 全局解析守卫
router.beforeResolve((to, from, next) => {
});
// 全局后置钩子
router.afterEach((to, from) => {
});

以上三个都是全局钩子，无论是哪个路由对象被激活，这些钩子都会被触发，只是触发的时机不同。

针对单个路由对象的钩子：

  {
    path: "/",
    name: "Home",
    component: Home,
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
    },
  },

组件内的钩子：

  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

一个实际项目中，如果涉及有导航切换，则钩子函数和生命周期的执行顺序应该是有两种情况：

1.打开页面的任意一个页面，没有发生导航切换。

全局前置守卫beforeEach (路由器实例内的前置守卫)->路由独享守卫beforeEnter(激活的路由)->组件内守卫beforeRouteEnter(渲染的组件)->全局解析守卫beforeResolve(路由器实例内的解析守卫)->全局后置钩子afterEach(路由器实例内的后置钩子)->beforeCreate->Created->beforeMount->Mounted

总结一下大概是这样：this.$router(beforeEach)->this.$route(beforeEnter)->this(beforeRouteEnter)->this.$router(beforeResolve)->this.$router(afterEach)->this(某个组件的生命周期 beforeCreate->Created->beforeMount->Mounted)

2. 如果是有导航切换的(从一个组件切换到另外一个组件)

组件内守卫beforeRouteLeave(即将离开的组件)->全局前置守卫beforeEach (路由器实例内的前置守卫)->组件内守卫beforeRouteEnter(渲染的组件)->全局解析守卫beforeResolve(路由器实例内的解析守卫)->全局后置钩子afterEach(路由器实例内的后置钩子)->beforeCreate->created->beforeMount->beforeDestroy->destroyed->mounted