Question

我正在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>

现在获取axios通话数据：

我使用以下格式：

{
    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)
    }
})

我遇到错误：

在控制台中，我得到：

在这种情况下我该怎么办？

Answer 1

我认为您几乎可以自己回答。错误日志可能会说import(val.location)正在导入依赖项，但是该依赖项是一个表达式。因此，您应该像在实验中一样将其替换为名称。

此外，我不确定是否有必要异步导入PageTitle内的两个组件（TopSellerWidget和Dashboard）。 Dashboard本身已经被异步加载，因此它的任何依赖项（例如PageTitle）也仅在您请求Dashboard时加载。而且，由于同时需要PageTitle和TopSellerWidget来正确渲染Dashboard，因此您最好将它们与Dashboard一起使用，而不是花更多的往返时间

通过axios调用

1 个答案: