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

在 Vue3 中，我们可以使用 `defineAsyncComponent` 方法来实现动态引入路由组件。同时，我们也需要在路由配置中使用 `component: defineAsyncComponent(() => import('@/views/xxx.vue'))` 的方式来指定组件。

以下是一个示例路由配置：

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue') // 普通的静态引入组件方式
  },
  {
    path: '/about',
    name: 'About',
    component: defineAsyncComponent(() => import('@/views/About.vue')) // 使用 defineAsyncComponent 动态引入组件
  }
];

export default routes;

需要注意的是，在使用 `defineAsyncComponent` 方法时，我们需要在 Vue3 的根实例的 `setup` 函数中使用 `defineAsyncComponent` 方法。例如：

import { createApp, defineAsyncComponent } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

// 在 setup 函数中使用 defineAsyncComponent
app.config.globalProperties.$defineAsyncComponent = defineAsyncComponent;

app.use(router).mount('#app');

在上面的示例中，我们将 `defineAsyncComponent` 方法挂载到了 Vue3 的根实例的 `globalProperties` 中，使得我们在组件中可以方便地使用。例如：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

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

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',

  async beforeRouteEnter(to, from, next) {
    const component = await this.$defineAsyncComponent(() => import(`@/views${to.path}.vue`));
    next((vm) => {
      vm.component = component;
    });
  },

  data() {
    return {
      component: null,
    };
  },
});
</script>

在上面的示例中，我们在 `beforeRouteEnter` 钩子函数中动态引入组件，并将其赋值给 `component` 变量，再将其渲染到页面中。在组件中，我们可以通过 `this.$defineAsyncComponent` 来调用 `defineAsyncComponent` 方法，从而实现动态引入路由组件的功能。