feat(client): add onAfterPageLoad hook in router (#4126)

vuejs · Sep 1, 2024 · 315c220 · 315c220
1 parent 77beb44
commit 315c220
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/docs/en/reference/runtime-api.md b/docs/en/reference/runtime-api.md
@@ -107,6 +107,10 @@ interface Router {
    * updated). Return `false` to cancel the navigation.
    */
   onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
+  /**
+   * Called after the page component is loaded (before the page component is updated).
+   */
+  onAfterPageLoad?: (to: string) => Awaitable<void>
   /**
    * Called after the route changes.
    */

diff --git a/docs/zh/reference/runtime-api.md b/docs/zh/reference/runtime-api.md
@@ -102,6 +102,10 @@ interface Router {
    * 在页面组件加载前（history 状态更新后）调用。返回 `false` 表示取消导航
    */
   onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
+  /**
+   * 在页面组件加载后（页面组件实际更新前）调用
+   */
+  onAfterPageLoad?: (to: string) => Awaitable<void>
   /**
    * 在路由更改后调用
    */

diff --git a/src/client/app/router.ts b/src/client/app/router.ts
@@ -29,6 +29,10 @@ export interface Router {
    * updated). Return `false` to cancel the navigation.
    */
   onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
+  /**
+   * Called after the page component is loaded (before the page component is updated).
+   */
+  onAfterPageLoad?: (to: string) => Awaitable<void>
   /**
    * Called after the route changes.
    */
@@ -94,6 +98,8 @@ export function createRouter(
           throw new Error(`Invalid route component: ${comp}`)
         }
 
+        await router.onAfterPageLoad?.(href)
+
         route.path = inBrowser ? pendingPath : withBase(pendingPath)
         route.component = markRaw(comp)
         route.data = import.meta.env.PROD