html - 将整个 html 页面嵌入到 Vue.js 模板中

问题描述

首先，请原谅我的英语，我正在使用翻译。

我有一个Vue.js项目，它具有典型的反应式框架的单页路径结构 ( SPA )，其中有一个主要组件，我在其中创建导航和页脚，并在相应的路径调用中使用 <router-view></router-view>

发生的情况是我需要引入一个页面项目内部的外部代码我不能与 Vue.js 混合，因为它有太多的 css，太不兼容和太广泛，无法协同工作。所以我想看看你是否可以在模板本身中输入对整个外部 html 页面的调用，这通常是用 iframe 完成的。

他们提供的第一件事是带有简单标签的 iframe 本身：

<template>
<iframe src="htmlexterno.html"></iframe>
</template>

但它没有工作，从我所看到的，似乎 iframe 与 Vue.js 不兼容

然后搜索互联网我找到了这段代码：

<template>
<div v-html="varhtml"></div>
<template>
<script>
export default {
data: {
    varhtml: '<p>Loading...</p>'
},

ready() {
    this.$http.get('htmlexterno.html').then(response => {
        this.varhtml = response.data;
    });
}
}
</script>

但这对我也不起作用。

然后感谢这个问题的答案的帮助，我得到了它来加载互联网网址，但 htmlexterno.html 是一个本地项目，对我不起作用。

我做的最后一个是这个，但它只有在我输入一个互联网网址（不是本地网址）时才有效：

<template>
    <iframe :src="ruta"></iframe>
</template>
<script>
export default {
    data: () => ({
        ruta: 'htmlexterno.html'
    })
}
</script>

如果有人可以帮助我，我将不胜感激。

标签： htmlvue.js

html - 将整个 html 页面嵌入到 Vue.js 模板中

问题描述

解决方案

推荐阅读