通过axios调用在Vuejs中的组件内调用异步组件

VueJS 这里我有一个api,它提供了在呈现页面时要加载的组件的信息。

vue-router 作为:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export const router = new VueRouter({
    routes:
        [
            {
                path: '/',
                component: Vue.component('welcome', () => import('../Components/Admin/Login.vue')),
                name: 'login'
            },
            {
                path: '/:page',
                component: Vue.component('dashboard', () => import('../Components/Admin/Dashboard/Dashboard.vue')),
                name: 'dashboard'
            },

        ]
});

dashboard 组件异步调用要加载的组件,如下所示:

<template>
    <div>
        <header>
            <nav class="navbar has-shadow">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="nav-item is-centered">
                            <img src="nits-assets/images/logo.png" alt="NitsEditor Logo" width="170" height="50">
                        </a>
                    </div>
                    <div class="navbar-menu">
                        <div class="navbar-end is-centered">
                            <div class="navbar-item">
                                <p class="control"><a class="button is-primary is-outlined is-rounded">Log out</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <div class="section" id="dashboard">
            <div class="columns">
                <aside class="column is-2 menu-section">
                    <nav class="menu is-centered">
                        // Menu section
                    </nav>
                </aside>

                <main class="column" id="main-section">
                    <page-title :title="title"></page-title>

                    <div class="columns is-multiline">
                        <div class="column">
                            <top-seller-widget></top-seller-widget>
                        </div>

                </main>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "dashboard",
        data() {
            return {
                pageComponents: '',
                title: '',
                description: ''
            }
        },
        components: {
            'PageTitle': () => import('./PageTitle'),
            'TopSellerWidget': () => import('./TopSellerWidget')
        },
        created() {
            axios.get('/api/page-components?slug='+this.$route.params.page).then(response => {
                if(response.status === 200)
                {
                    this.title = response.data.page.title
                    console.log(response.data)
                }
            })
        }
    }
</script>

<style scoped>
    // Some styling
</style>

如您所见,我正在尝试异步导入组件部分中的组件:

components: {
    'PageTitle': () => import('./PageTitle'),
    'TopSellerWidget': () => import('./TopSellerWidget')
},

调用模板中的组件:

<div class="section" id="dashboard">
    <div class="columns">
        <aside class="column is-2 menu-section">
            <nav class="menu is-centered">
                // Menu section
            </nav>
        </aside>

        <main class="column" id="main-section">
            <page-title :title="title"></page-title>

            <div class="columns is-multiline">
                <div class="column">
                    <top-seller-widget></top-seller-widget>
                </div>

        </main>
    </div>
</div>

我的格式是:

{
    components: [
        {name: 'PageTitle', location:'./PageTitle', 'data': {title: 'Dashboard'}},
        {name: 'TopSellerWidget', location:'./TopSellerWidget', 'data': NULL}
    ]
}

然后我检查在得到响应时是否可以加载组件:

axios.get('/api/page-components?slug='+this.$route.params.page).then(response => {
    if(response.status === 200)
    {
        this.title = response.data.page.title
        if(response.data.page.content)
        {
            Vue.component('PageTitle', () => import('./PageTitle'))
            Vue.component('TopSellerWidget', () => import('./TopSellerWidget'))

        }
        console.log(response.data)
    }
})

它工作得很好,但当我试图让它充满活力时:

axios.get('/api/page-components?slug='+this.$route.params.page).then(response => {
    if(response.status === 200)
    {
        this.title = response.data.page.title
        if(response.data.page.content)
        {
            response.data.page.content.components.forEach(function (val, index) {
                Vue.component(val.name, () => import(val.location))
            })

        }
        console.log(response.data)
    }
})

在控制台里我得到: