I’m using vue 3.4.27 and vue-router 4.3.2 and I’m lazy loading some routes like this:

{
  path: '/path/to/pageone',
  component: () => import('../components/MyStuff/PageOne.vue')
},
{
  path: '/path/to/pagetwo',
  component: () => import('../components/MyStuff/PageTwo.vue')
},

I’ve got over a dozen of these; the site doesn’t lend itself to dynamic routing for this part. My goal is to be able to get the current path, which I can do, then look up to see what other components are in the same folder and then pre-fetch them so they are available immediately instead of waiting to be downloaded when a router-link is clicked.. So if my current path is /path/to/pagefour I would get a list with something like:

'../components/MyStuff/PageOne.vue',
'../components/MyStuff/PageTwo.vue',
'../components/MyStuff/PageThree.vue',
'../components/MyStuff/PageFour.vue',

etc., because they are all associated with the /path/to/ route.

I’ve created a composable:

import { type Router } from 'vue-router';

export function usePrefetch(path: string = '', myRouter: Router): void {
  if (path === '') {
    return;
  }
  console.log(myRouter);
  console.log(myRouter.getRoutes());
}

All of my lazy loaded routes load as expected, the js files are downloaded when I click the router link. My composable is working because I can see myRouter and when I look at myRouter.getRoutes() I can see the array of routes with all of the paths. But if I look at one of the routes, what I don’t see is anything with the component: () => import('../components/MyStuff/PageOne.vue') information. For non-lazy loaded routes I see the component listed.

Any ideas on how to get that data? Would it be better to just import the router that is created with the createRouter function?

thanks!