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

Question

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

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

情况是我需要引入一个页面项目内部的外部代码我无法与 Vue.js 混合，因为它有太多的 css，这些 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>

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

Answer 1

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

我注意到您正在尝试加载本地文件 iframe。尝试替换该文件的 URL 或阅读静态资源处理。

P/S 加载 iframe 是基本的 HTML 内容，所以 Vue 肯定不止于此。