Vue的路由在執(zhí)行跳轉(zhuǎn)時(shí)，根據(jù)源碼可知，調(diào)用了router中定義的navigate函數(shù)

function push(to: RouteLocationRaw) {
   return pushWithRedirect(to)
}

function replace(to: RouteLocationRaw) {
   return push(assign(locationAsObject(to), { replace: true }))
}

function pushWithRedirect(
    to: RouteLocationRaw | RouteLocation,
    redirectedFrom?: RouteLocation
  ): Promise<NavigationFailure | void | undefined> {
    // ...

    return (failure ? Promise.resolve(failure) : navigate(toLocation, from))/*調(diào)用navigate*/
      .catch((error: NavigationFailure | NavigationRedirectError) =>
        isNavigationFailure(error)
          ? // navigation redirects still mark the router as ready
            isNavigationFailure(error, ErrorTypes.NAVIGATION_GUARD_REDIRECT)
            ? error
            : markAsReady(error) // also returns the error
          : // reject any unknown error
            triggerError(error, toLocation, from)
      )
      .then((failure: NavigationFailure | NavigationRedirectError | void) => {
        if (failure) {
          // ...
        } else {
          // 執(zhí)行finalizeNavigation完成導(dǎo)航
          // if we fail we don't finalize the navigation
          failure = finalizeNavigation(
            toLocation as RouteLocationNormalizedLoaded,
            from,
            true,
            replace,
            data
          )
        }
        // 觸發(fā)`afterEach`
        triggerAfterEach(
          toLocation as RouteLocationNormalizedLoaded,
          from,
          failure
        )
        return failure
      })
}

function navigate(
    to: RouteLocationNormalized,
    from: RouteLocationNormalizedLoaded
  ): Promise<any> {
    let guards: Lazy<any>[]

    // ...

    // run the queue of per route beforeRouteLeave guards
    return (
      // 1.調(diào)用離開組件的`beforeRouteLeave`鉤子
      runGuardQueue(guards)
        .then(() => {
          // 獲取全局的的`beforeEach`鉤子
          // check global guards beforeEach
          guards = []
          for (const guard of beforeGuards.list()) {
            guards.push(guardToPromiseFn(guard, to, from))
          }
          guards.push(canceledNavigationCheck)

          // 2.調(diào)用全局的`beforeEach`鉤子
          return runGuardQueue(guards)
        })
        .then(() => {
          // 獲取更新的路由其對應(yīng)組件的`beforeRouteUpdate`鉤子
          // check in components beforeRouteUpdate
          guards = extractComponentsGuards(
            updatingRecords,
            'beforeRouteUpdate',
            to,
            from
          )

          for (const record of updatingRecords) {
            record.updateGuards.forEach(guard => {
              guards.push(guardToPromiseFn(guard, to, from))
            })
          }
          guards.push(canceledNavigationCheck)

          // 3.調(diào)用復(fù)用組件的`beforeRouteUpdate`鉤子
          // run the queue of per route beforeEnter guards
          return runGuardQueue(guards)
        })
        .then(() => {
          // 獲取進(jìn)入的路由自身的`beforeEnter`鉤子
          // check the route beforeEnter
          guards = []
          for (const record of enteringRecords) {
            // do not trigger beforeEnter on reused views
            if (record.beforeEnter) {
              if (isArray(record.beforeEnter)) {
                for (const beforeEnter of record.beforeEnter)
                  guards.push(guardToPromiseFn(beforeEnter, to, from))
              } else {
                guards.push(guardToPromiseFn(record.beforeEnter, to, from))
              }
            }
          }
          guards.push(canceledNavigationCheck)

          // 4.調(diào)用新匹配路由的`beforeEnter`鉤子
          // run the queue of per route beforeEnter guards
          return runGuardQueue(guards)
        })
        .then(() => {
          // NOTE: at this point to.matched is normalized and does not contain any () => Promise<Component>

          // clear existing enterCallbacks, these are added by extractComponentsGuards
          to.matched.forEach(record => (record.enterCallbacks = {}))

          // 獲取進(jìn)入的路由其對應(yīng)組件的`beforeRouteEnter`鉤子
          // check in-component beforeRouteEnter
          guards = extractComponentsGuards(
            enteringRecords,
            'beforeRouteEnter',
            to,
            from
          )
          guards.push(canceledNavigationCheck)

          // 5.調(diào)用新組件的`beforeRouteEnter`鉤子
          // run the queue of per route beforeEnter guards
          return runGuardQueue(guards)
        })
        .then(() => {
          // 獲取全局的的`beforeResolve`鉤子
          // check global guards beforeResolve
          guards = []
          for (const guard of beforeResolveGuards.list()) {
            guards.push(guardToPromiseFn(guard, to, from))
          }
          guards.push(canceledNavigationCheck)

          // 6.調(diào)用全局的`beforeResolve`守衛(wèi)
          return runGuardQueue(guards)
        })
        // catch any navigation canceled
        .catch(err =>
          isNavigationFailure(err, ErrorTypes.NAVIGATION_CANCELLED)
            ? err
            : Promise.reject(err)
        )
    )
  }
  
  // 觸發(fā)`afterEach`
  function triggerAfterEach(
    to: RouteLocationNormalizedLoaded,
    from: RouteLocationNormalizedLoaded,
    failure?: NavigationFailure | void
  ): void {
    // navigation is confirmed, call afterGuards
    // TODO: wrap with error handlers
    afterGuards
      .list()
      .forEach(guard => runWithContext(() => guard(to, from, failure)))
  }

由上述源碼中可以看出，由Promise then的鏈?zhǔn)秸{(diào)用保證了路由守衛(wèi)按照以下順序執(zhí)行：

1. 舊的路由組件beforeRouteLeave
2. 全局配置的beforeEach
3. 復(fù)用的路由組件beforeRouteUpdate
4. 新路由的beforeEnter
5. 新路由組件的beforeRouteEnter
6. 全局配置的beforeResolve
7. navigate執(zhí)行完畢后，會(huì)調(diào)用triggerAfterEach函數(shù)，觸發(fā)afterEach

和官網(wǎng)文檔上所寫的是一樣的。The Full Navigation Resolution Flow文章來源地址http://www.zghlxwxcb.cn/news/detail-607452.html

到了這里，關(guān)于vue-router鉤子執(zhí)行順序的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！