vue路由实现iframe
在Vue中实现iframe路由
使用Vue Router结合iframe实现嵌套页面功能，可以通过动态路由或组件方式加载外部URL内容。
路由配置方法
创建带有iframe组件的路由配置，动态传递URL参数：
// router/index.js
const routes = [
{
path: '/iframe/:url',
component: () => import('@/components/IframeWrapper'),
props: true
}
]Iframe封装组件
创建可复用的iframe组件，处理安全性和自适应高度：
<template>
<div class="iframe-container">
<iframe
:src="encodedUrl"
frameborder="0"
@load="adjustHeight"
ref="iframe"
/>
</div>
</template>
<script>
export default {
props: ['url'],
computed: {
encodedUrl() {
return decodeURIComponent(this.url)
}
},
methods: {
adjustHeight() {
this.$nextTick(() => {
const iframe = this.$refs.iframe
iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`
})
}
}
}
</script>
<style>
.iframe-container {
overflow: hidden;
width: 100%;
}
iframe {
width: 100%;
min-height: 100vh;
}
</style>使用方式
通过路由跳转传递URL参数：
this.$router.push({
path: '/iframe',
query: {
url: encodeURIComponent('https://external-site.com')
}
})或直接在模板中使用：
<router-link
:to="{
path: '/iframe',
query: { url: encodeURIComponent('https://example.com') }
}">
打开外部页面
</router-link>安全性注意事项
添加sandbox属性限制iframe权限：
<iframe
sandbox="allow-same-origin allow-scripts allow-popups"
:src="url"
/>对于跨域内容，建议后端代理处理敏感请求，避免直接暴露外部URL。考虑使用Content Security Policy (CSP)增强安全性。
