如何使用 vue-router 和 getRoutes 获取延迟加载的组件

Question

我正在使用 vue 3.4.27 和 vue-router 4.3.2，我懒惰地加载一些这样的路由：

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

我有十多个这样的；该站点不适合这部分的动态路由。我的目标是能够获取当前路径，我可以这样做，然后查找同一文件夹中的其他组件，然后预取它们，以便它们立即可用，而不是等待路由器下载-链接被点击..所以如果我当前的路径是

/path/to/pagefour

我会得到一个类似以下内容的列表：

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

等等，因为它们都与

/path/to/

路线相关联。

我创建了一个可组合项：

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

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

我的所有延迟加载路由均按预期加载，当我单击路由器链接时会下载 js 文件。我的可组合项正在工作，因为我可以看到 myRouter，当我查看 myRouter.getRoutes() 时，我可以看到包含所有路径的路由数组。但如果我查看其中一条路线，我看不到看到的是任何带有

component: () => import('../components/MyStuff/PageOne.vue')

信息的内容。对于非延迟加载的路由，我看到列出的组件。

关于如何获取这些数据有什么想法吗？直接导入使用 createRouter 函数创建的路由器会更好吗？

谢谢！

Answer 1

好吧，我想我有一些更“认可”的方法来获得我想要的东西

使用 Router 对象。

1. 获取 Router 对象的方法有以下几种：

• 在可组合项中，

  import  router from '@/router';

  可能是这三种方式中最好的方式。
• 在调用vue组件中，传入$router（如果使用options api则为this.$router）
• 在调用 vue 组件中，

  import { useRouter } from 'vue-router';

  ，然后将

  useRouter()

  传递给可组合项

2. 在 Router 对象上调用 getRoutes()：

   const allRoutes = router.getRoutes;

3. 获取当前路径：

   const currPath = router.currentRoute.value.path;

4. 遍历所有路由并查看每个路由的默认组件，将其转换为字符串，并以这种方式提取信息。

   router.getRoutes().forEach( (route) => { console.log(route.components.default.toString()); } );

   .default 是一个函数，所以这就是为什么我将它转换为字符串，然后我可以解析它并找出组件从哪里加载。

使用路由器中的元字段

由于我已经定义了路径以及要延迟加载的组件，因此很容易添加一个元字段来为我提供文件的相对路径。

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

然后我可以迭代路由器对象并访问路径和元数据：

router.getRoutes().forEach( (route) => { 
  console.log(route.components.meta.file); 
  console.log(route.path);
} );

然后从那里开始。

尽管我不喜欢将函数转换为字符串，但这可能是正确的方法，因为这总是会告诉我服务器上组件的路径。否则，如果我更改了站点的部署位置，那么我必须更改元中的文件位置或更改可组合项以以不同的方式解析位置。也许有某种方法可以两全其美。我得考虑一下。