vue3+ts如何利用import动态引入路由

在 Vue3 中，利用 import 动态引入路由的方式与 Vue2 有所不同。以下是一个简单的示例，演示如何在 Vue3 + TypeScript 中动态引入路由：

import { RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
]

export default routes

如上所示，我们使用了 Vue Router 4.x 中的 `RouteRecordRaw` 类型，并通过 `import()` 函数动态引入路由组件。需要注意的是，由于使用了 TypeScript，我们需要在 `tsconfig.json` 中配置 `esModuleInterop` 为 `true`，以支持默认导入。另外，我们还可以使用 `webpackChunkName` 来指定动态引入的路由组件所属的代码块名称，以便于在调试时更轻松地定位问题。

此外，还需要在路由实例中使用 `routes` 属性来指定路由配置，例如：

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

以上示例中，我们将动态引入的路由配置传递给了 `routes` 属性。通过这种方式，我们可以在 Vue3 + TypeScript 中轻松地实现路由动态引入。