Question

我正在尝试在Vue js应用程序的div内加载（Jupyter笔记本的）静态HTML文件。

我尝试做<iframe src="/static/product.html">，但这会在iframe中呈现vue应用程序的主页。

在vue中执行此操作的正确方法是什么？

Answer 1

如果尚未加载vue ressource加载项

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js"></script>

在您的应用中，创建一个用于加载静态html原始页面的组件

Vue.component('statichtmlpage', function (resolve, reject) {
    vue.$http.get('your_static_html_page.html', function(data, status, request){
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

并在您希望显示页面的位置添加组件标签

<statichtmlpage></statichtmlpage>

在Vue中加载静态HTML文件

1 个答案: