526互联

vue-router钩子执行顺序

发布时间 2023-07-27 17:56:16作者: beckyye

Vue的路由在执行跳转时，根据源码可知，调用了router中定义的navigate函数

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))/*调用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 {
          // 执行finalizeNavigation完成导航
          // if we fail we don't finalize the navigation
          failure = finalizeNavigation(
            toLocation as RouteLocationNormalizedLoaded,
            from,
            true,
            replace,
            data
          )
        }
        // 触发`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.调用离开组件的`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.调用全局的`beforeEach`钩子
          return runGuardQueue(guards)
        })
        .then(() => {
          // 获取更新的路由其对应组件的`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.调用复用组件的`beforeRouteUpdate`钩子
          // run the queue of per route beforeEnter guards
          return runGuardQueue(guards)
        })
        .then(() => {
          // 获取进入的路由自身的`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.调用新匹配路由的`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 = {}))

          // 获取进入的路由其对应组件的`beforeRouteEnter`钩子
          // check in-component beforeRouteEnter
          guards = extractComponentsGuards(
            enteringRecords,
            'beforeRouteEnter',
            to,
            from
          )
          guards.push(canceledNavigationCheck)

          // 5.调用新组件的`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.调用全局的`beforeResolve`守卫
          return runGuardQueue(guards)
        })
        // catch any navigation canceled
        .catch(err =>
          isNavigationFailure(err, ErrorTypes.NAVIGATION_CANCELLED)
            ? err
            : Promise.reject(err)
        )
    )
  }
  
  // 触发`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的链式调用保证了路由守卫按照以下顺序执行：

  1. 旧的路由组件beforeRouteLeave
  2. 全局配置的beforeEach
  3. 复用的路由组件beforeRouteUpdate
  4. 新路由的beforeEnter
  5. 新路由组件的beforeRouteEnter
  6. 全局配置的beforeResolve
  7. navigate执行完毕后，会调用triggerAfterEach函数，触发afterEach

和官网文档上所写的是一样的。The Full Navigation Resolution Flow