vue3动态组件defineAsyncComponent

当有多个页面有相同展示模块内容，可以使用动态组件defineAsyncComponent优化代码加载页面

//1定义方法
import { defineAsyncComponent } from 'vue'

// const modules = import.meta.glob('../views/**/*.{vue}')
const modules = import.meta.glob('../views/**/*.vue')

/**
 * 注册一个异步组件
 * @param componentPath 例:/views/oa/leave/detail
 */
export const registerComponent = (componentPath) => {
    console.log(modules,"modules");

  for (const item in modules) {
    if (item.includes(componentPath)) {
      // 使用异步组件的方式来动态加载组件
      return defineAsyncComponent(modules[item])
    }
  }
}
//2引入使用
import {registerComponent} from "@/utils/routerHelper";

//3传入动态路径
BusinessFormComponent.value = registerComponent(ViewPath)

//4展示组件
 <view class="pd">
          <BusinessFormComponent :id="id" />
</view>