VUE 3动态导入文件

Question

我正在尝试构建VUE 3动态加载JSON文件，以创建网站构建器。因此每个页面都定义为JSON文件，以允许用户从后端更改JSON文件（所有组件都在该文件中定义）。

当我加载以外的其他路由时，它的工作正常，但是AUTH正在加载两次（load_components函数）。

这是路线的示例。大多数页面都会有一个加载的组件，但是有一些不会。现在，LoadParent仅具有＆lt; router-view /＆gt; < /code>：

    // Simple page
    {
        path: "/home",
        name: "home",
        component: () => import("../loadPage.vue"),
    },
    // Pages with parent
    {
        name: 'auth',
        path: '/auth',
        meta: {
            title: "Some users" ,
            adminOnly: true
        },
        component: () => import("../loadParent.vue"),
        children: [
            {
                path: '',
                name: 'login',
                props: (route: any) => ({}),
                component: () => import("../loadPage.vue"),
            }
        ]
    }

因此，这是模板的样子：

<template>
    <component v-for="block in components" :is="{...block.component}" :key="Math.random()" :vars="block.props"></component>
</template>

在设置脚本中，我定义了ref ref ref存储的文件路径，例如：

const json: any = ref();

因为每个文件都定义为路由名称，所以我在设置中使用导入：

json.value = import('../pages/' + route.value + '.json');

所以这是我如何实际加载组件的功能：

const load_components = async () => {
        console.log('load page components ')
        // Get file for load
        Promise.resolve(json.value).then(function (e: any) {
            // Reset previous page pages
            components.value = [];

            // For each component for the page and register them under new const of the pages
            e.default.components.forEach((c: any) => {
                components.value.push({
                    "component": defineAsyncComponent(() => import('./templates/' + template.value + '/' + c.component)),
                    "props": c.props
                })
            })
        }).catch((e: any) => {
            // If component can't be loaded - Delete for production
            console.log(e + ' cannot be loaded!');
        });
    }

因此，为了触发函数，我正在做类似的事情：

onBeforeMount(async() => {
            json.value = import('../pages/' + route.value + '.json');

            // Initiate component load
            await load_components()
        })

        // /** Watch when client changes a page to load new json for next page - This function is for pages that has same component */
        watch(router, async (value: any) => {
            json.value = import('../pages/' + value.name + '.json');

            // There is no need for that if I load it really dynamically
            await load_components()
        })

也许只是方法不正确，您怎么看？