fix: loaders not being collected from async components for repeated navigations

Author: minht11

src/data-loaders/meta-extensions.ts

@@ -8,6 +8,7 @@ import type {
   ABORT_CONTROLLER_KEY,
   NAVIGATION_RESULTS_KEY,
   IS_SSR_KEY,
+  LOADER_SET_PROMISES_KEY,
 } from './symbols'
 import { type NavigationResult } from './navigation-guard'
 
@@ -70,6 +71,12 @@ declare module 'vue-router' {
      */
     [LOADER_SET_KEY]?: Set<UseDataLoader>
 
+    /**
+     * List of promises while loaders from async components are being collected.
+     * @internal
+     */
+    [LOADER_SET_PROMISES_KEY]?: Promise<void>[]
+
     /**
      * The signal that is aborted when the navigation is canceled or an error occurs.
      * @internal

src/data-loaders/navigation-guard.spec.ts

@@ -178,6 +178,26 @@ describe('navigation-guard', () => {
     expect([...set!]).toEqual([useDataOne, useDataTwo])
   })
 
+  it('collects all loaders from lazy loaded pages with repeated navigation', async () => {
+    setupApp({ isSSR: false })
+    const router = getRouter()
+    router.addRoute({
+      name: '_test',
+      path: '/fetch',
+      component: () =>
+        import('../../tests/data-loaders/ComponentWithLoader.vue'),
+    })
+
+    void router.push('/fetch')
+
+    // simulate repeated navigation while the async component is loading
+    await Promise.resolve()
+    await router.push('/fetch')
+
+    const set = router.currentRoute.value.meta[LOADER_SET_KEY]
+    expect([...set!]).toEqual([useDataOne, useDataTwo])
+  })
+
   it('awaits for all loaders to be resolved', async () => {
     setupApp({ isSSR: false })
     const router = getRouter()

src/data-loaders/navigation-guard.ts

@@ -14,6 +14,7 @@ import {
   IS_SSR_KEY,
   LOADER_ENTRIES_KEY,
   LOADER_SET_KEY,
+  LOADER_SET_PROMISES_KEY,
   NAVIGATION_RESULTS_KEY,
   PENDING_LOCATION_KEY,
 } from './meta-extensions'
@@ -105,6 +106,7 @@ export function setupLoaderGuard({
     const lazyLoadingPromises: Promise<unknown>[] = []
 
     for (const record of to.matched) {
+      console.log('record', record.meta[LOADER_SET_KEY])
       // we only need to do this once per record as these changes are preserved
       // by the router
       if (!record.meta[LOADER_SET_KEY]) {
@@ -114,6 +116,7 @@ export function setupLoaderGuard({
         // add all the loaders from the components to the set
         for (const componentName in record.components) {
           const component: unknown = record.components[componentName]
+          console.log('component', component, isAsyncModule(component))
 
           // we only add async modules because otherwise the component doesn't have any loaders and the user should add
           // them with the `loaders` array
@@ -143,10 +146,17 @@ export function setupLoaderGuard({
                 }
               }
             }
+            console.log('v', viewModule)
           })
 
+          record.meta[LOADER_SET_PROMISES_KEY] ??= []
+          record.meta[LOADER_SET_PROMISES_KEY].push(promise)
           lazyLoadingPromises.push(promise)
         }
+      } else if (record.meta[LOADER_SET_PROMISES_KEY]) {
+        // When repeated navigation happen on the same route, loaders might still be
+        // resolved from async modules, so we need to wait for them to resolve.
+        lazyLoadingPromises.push(...record.meta[LOADER_SET_PROMISES_KEY])
       }
     }
 
@@ -156,6 +166,7 @@ export function setupLoaderGuard({
         // merge the whole set of loaders
         for (const loader of record.meta[LOADER_SET_KEY]!) {
           to.meta[LOADER_SET_KEY]!.add(loader)
+          to.meta[LOADER_SET_PROMISES_KEY] = undefined
         }
       }
       // we return nothing to remove the value to allow the navigation

src/data-loaders/symbols.ts

@@ -4,6 +4,12 @@
  */
 export const LOADER_SET_KEY = Symbol('loaders')
 
+/**
+ * Retrieves promises for loaders which are still being collected.
+ * @internal
+ */
+export const LOADER_SET_PROMISES_KEY = Symbol('loadersPromise')
+
 /**
  * Retrieves the internal version of loader entries.
  * @internal