vite+vue3 动态导入某文件夹下vue文件并使其成为动态组件

<template>
    <navLayout :isShowHeader="false">
        <template #nav>
            <div v-for="(item, index) in data" :key="index">
                <el-button @click="change(item)">{{ item.name }}</el-button>
            </div>
        </template>
        <template #article>
            <component :is="dom[component]" v-if="showCom" />
        </template>
    </navLayout>
</template>

<script setup >
import { ref, reactive, toRefs, onMounted, shallowReactive } from 'vue'
import { useRoute } from 'vue-router';
import navLayout from '@/components/page/nav-layout.vue';
const route = useRoute();
const store = useStore();
const component = ref();
const showCom = ref(false)
const dom = ref({csbj});
const data = store.getters.sidebarRouters[19].children[2].children;
const importComponent = async (componentName) => {
    const component = await import(`../ssbj/${componentName}.vue`);
    return component.default;
};
let componentNames = data.map(item => {
    return item.path.replace('/bj/ssbj/', '')
})

async function loadComponents() {
    const components = {};
    for (const name of componentNames) {
        components[name] = await importComponent(name);
    }
    dom.value = { ...components };
    component.value = 'csbj';
    // 检查所有组件是否已导入完成
    const isLoaded = Object.keys(dom.value).every(name => !!dom.value[name]);
    if (isLoaded) {
        showCom.value = true;
    }
}

loadComponents();



</script>