fix(client): avoid mismatching between route path and page data (close #1249) (#1361)

Co-authored-by: meteorlxy <[email protected]>

Author: Mister-Hope

packages/client/src/router.ts

@@ -1,4 +1,5 @@
 import { pagesComponents } from '@internal/pagesComponents'
+import type { PageData } from '@vuepress/shared'
 import { removeEndingSlash } from '@vuepress/shared'
 import {
   createMemoryHistory,
@@ -32,13 +33,23 @@ export const createVueRouter = (): Router => {
     },
   })
 
+  // ensure page data and page component have been loaded in beforeResolve hook,
+  // but do not assign page data immediately to avoid mismatching between page data and route path.
+  let pendingPageData: PageData
+  let pendingToPath: string
   router.beforeResolve(async (to, from) => {
     if (to.path !== from.path || from === START_LOCATION) {
-      // ensure page data and page component have been loaded
-      ;[pageData.value] = await Promise.all([
+      ;[pendingPageData] = await Promise.all([
         resolvers.resolvePageData(to.name as string),
         pagesComponents[to.name as string]?.__asyncLoader(),
       ])
+      pendingToPath = to.path
+    }
+  })
+  // instead, assign page data in afterEach hook
+  router.afterEach((to, from) => {
+    if (to.path !== from.path && to.path === pendingToPath) {
+      pageData.value = pendingPageData
     }
   })