记录学习过程 比较菜
首先我们在我们先创建一个叫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>