通过 AJAX 加载 Vue 组件答案

【问题标题】：Load Vue Componet via AJAX通过 AJAX 加载 Vue 组件
【发布时间】：2018-06-18 10:17:57
【问题描述】：

我想通过 AJAX 动态加载 Vue 组件并渲染它的模板。

主 Vue 实例：

const router = new VueRouter({
    path: '/vue/actions/',
    mode: 'history'
});

var app = new Vue({
    el: '#mainContainer',
    router,
    data: {
        mainContent: ''
    },
    methods: {
        action: function (url) {
            alert(url);
            this.$router.push({ path: '/vue/actions/?'+url});
            console.log(this.$route.query);
        },
        actions: function () {
            var action;
            if (!this.$route.query.action || this.$route.query.action == 'main') {
                action = 'index';
            } else {
                action = this.$route.query.action;
            }
            var mainContent;
            fetch('/vue/actions/?content_type=json&action='+action).then((response) => {
                if(response.ok) {
                    return response.json();
                }
                throw new Error('Network response was not ok');
            }).then((json) => {
                this.$router.push({ path: '/vue/actions/', query: { action: json.action }});
                // this.mainContent = json.template;
                console.log(json.template);
                this.dynamicComponent = json.template;
            }).catch((error) => {
                console.log(error);
            });
        }
    },
    created: function () {
        this.actions();
    }
})

初始页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
    <script type="text/javascript" src="/js/vue.min.js"></script>
    <script src="/js/vue-router.js"></script>
</head>
<body>
<template><div><component :is="dynamicComponent"></component></div></template>
<div id="mainContainer" v-html="mainContent"></div>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>

我想通过 AJAX 加载的组件：

Vue.component('dynamicComponent', {
    template: '<div>Dynamic Component!</div>'
});

是否可以加载这样的 Vue 组件并渲染其模板（能够在组件模板中使用 Vue 数据绑定）？

【问题讨论】：

为什么要通过ajax加载组件？
@MazinoSUkah 我只想在需要时发送组件
那么也许不要用ajax加载它？相反，只需向组件添加 v-if="someTrigger" 并在您希望加载组件时将其值切换为 true。在 vue 中，v-if 加载是“惰性”的，这意味着组件仅在 v-if 评估为 true 时才实际加载。
@helgi 听起来你需要 webpack 代码拆分
@helgi，不客气

标签： ajax vue.js components

【解决方案1】：

这是我得到我需要的东西的方式：

主 Vue 实例：

const router = new VueRouter({
    path: '/vue/actions/',
    mode: 'history'
});

var app = new Vue({
    el: '#mainContainer',
    router,
    data: {
        mainContent: ''
    },
    methods: {
        action: function (url) {
            this.$router.push({ path: '/vue/actions/?'+url});
            console.log(this.$route.query);
        },
        actions: function () {
            var action;
            if (!this.$route.query.action || this.$route.query.action == 'main') {
                action = 'index';
            } else {
                action = this.$route.query.action;
            }
            Vue.component('dynamic-component', (resolve) => {
                import('/vue/actions/?content_type=javascript&action='+action).then((component) => {
                    resolve(component.default);
                });
            });
        }
    },
    created: function () {
        this.actions();
    }
})

主/初始页面正文：

<body>
<div id="mainContainer">
    <dynamic-component></dynamic-component>
</div>
<script type="text/javascript" src="{{.__web_root_folder}}/js/main.js"></script>
</body>

我在需要时加载的组件代码：

export default {
    template: '<div>Async Component! {{.test}}</div>',
    data () {
        return {
            test: 'Works!'
        }
    }
}

感谢@MazinoSUkah！

【讨论】：

不幸的是，这在 Firefox 中不起作用（还）这个解决方案有替代方案吗？以某种方式绑定/评估通过 Ajax 动态加载的 JS 文件？我尝试将其解析为 JSON，但失败了，因为创建函数在 JSON 对象中无效
@NelsonRodriguez 你对 FF 的看法是对的，这是最遗憾的。我没有找到我提供的更好的解决方案。您可以做的一件事是使用 JS 转译器 Bable 或 Webpack 并使此代码在 FF 中工作。