Hola tengo un proyecto Vue.js con una estructura de rutas en una sola pagina(SPA) típica de los frameworks reactivos con un componente principal donde creo el nav y el footer y dentro la llamada a la ruta correspondiente con <router-view></router-view>
Lo que ocurre es que necesito introducir una pagina con código externo dentro del proyecto que no puedo mezclar con Vue.js porque tiene mucho css que es demasiado incompatible y extenso como para hacerlo funcionar junto. Por ello quería ver si se podía introducir dentro del propio template una llamada a una pagina html entera externa, lo que se suele hacer con Iframe.
Lo primero que prove fue el propio Iframe con una etiqueta simple:
<template>
<iframe src="htmlexterno.html"></iframe>
</template>
Pero no me funciono y por lo que he visto es porque parece ser que Iframe no es compatible con Vue.js
Entonces buscando en internet encontre este codigo:
<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>
Pero tampoco me funciona.
Después gracias la ayuda de un foro conseguí que me cargue urls de internet, pero htmlexterno.html es un proyecto local y no me funciona.
La último que hice es esto pero solo funciona si pongo una url de intenet(no local):
<template>
<iframe :src="ruta"></iframe>
</template>
<script>
export default {
data: () => ({
ruta: 'htmlexterno.html'
})
}
</script>
Agradecería si alguien me pudiese ayudar.