vue-router钩子函数和执行顺序

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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) => { });

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

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

1 2 3 4 5 6 7 8

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

组件内的钩子：

1 2 3 4 5 6 7 8 9 10 11 12 13

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