vue3 defineAsyncComponent 使用异步组件的方式来动态加载组件

首先我们在我们先创建一个叫routerHelper.ts的文件 引入以下代码  注意modules 中要创建的路径

import { defineAsyncComponent } from "vue"
 
const modules = import.meta.glob('../views/**/*.{vue,tsx}')
/**
 * 注册一个异步组件
 * @param componentPath 例:/bpm/oa/leave/detail
 */
export const registerComponent = (componentPath: string) => {
  for (const item in modules) {
    if (item.includes(componentPath)) {
      // 使用异步组件的方式来动态加载组件
      // @ts-ignore
      return defineAsyncComponent(modules[item])
    }
  }
}

下一步就引入文件然后进行展示

<template>
    <div>
        <!-- 动态组件的显示 -->
        <BusinessFormComponent></BusinessFormComponent>
    </div>
</template>
 
<script setup>
import { ref, onMounted } from "vue"
// 引入刚刚创建的方法
import { registerComponent } from '@/utils/routerHelper'
 
// 创建动态组件
const BusinessFormComponent = ref(null) // 异步组件
onMounted(() => {
    // 然后放入动态路由
    BusinessFormComponent.value = registerComponent('/index')
})
</script>
<style lang="less" scoped></style>