Question

我想通过AJAX动态加载Vue Component并渲染其模板。

主要Vue实例：

twig

初始页面：

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();
    }
})

组件I希望通过AJAX加载：

<!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>

是否可以加载此类Vue Componet并呈现其模板（能够在Component模板中使用Vue数据绑定）？

Answer 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！

通过AJAX加载Vue Componet

1 个答案: