如何在 Vue3 中实现懒加载的动态路由？

在 Vue3 中，如果想要实现懒加载的动态路由，也就是延迟加载某个模块直到需要时才加载，你可以结合使用 Vue Router 的 `import()` 功能和动态导入（dynamic import）。这样做的好处是可以避免不必要的代码初始化和提高首屏加载速度。

首先，在你的路由配置中，对动态部分使用 `import.meta.glob` 替换实际的模块引用，这样就可以让浏览器在运行时按需加载该模块：

// vite.config.js 或 .vue-router
const dynamicImport = (path) => import(`./views/${path}`);

const lazyRoutes = {
  path: '/users/:userId',
  name: 'User',
  component: () =>
    import.meta.glob(`/components/UserView/*.vue`).then((component) => ({
      default: component.default,
    })),
};

在这里，`/components/UserView/*.vue` 表示所有位于 `UserView` 目录下的 Vue 组件。当你访问如 `/users/123` 的路由时，只有对应的用户视图组件会被动态导入。

然后，在组件中，你可以像使用普通的静态组件那样使用这个懒加载的组件：

<template>
  <router-view></router-view>
</template>

<script>
export default {
  async setup() {
    const userId = this.$route.params.userId;
    return { component: await lazyRoutes.component(userId) };
  }
}
</script>

这样，当你第一次导航到 `/users/123` 时，只会有 `UserView.vue` 被加载，其他未被访问的路由对应的组件不会预先加载。