当前位置：首页 > VUE

vue路由实现iframe

2026-03-28 06:36:33VUE

Vue 路由中实现 iframe 的方法

在 Vue 项目中，可以通过路由动态加载 iframe 实现嵌套第三方页面或本地 HTML 文件。以下是具体实现方式：

创建路由配置

在 router/index.js 中配置一个动态路由，通过 component 加载 iframe 组件：

{
  path: '/iframe/:url',
  name: 'iframe',
  component: () => import('@/components/IframeWrapper.vue'),
  props: true // 开启路由参数传递为 props
}

构建 iframe 容器组件

创建 IframeWrapper.vue 组件处理动态 URL：

<template>
  <div class="iframe-container">
    <iframe 
      :src="decodedUrl" 
      frameborder="0" 
      allowfullscreen
      @load="handleLoad"
    />
  </div>
</template>

<script>
export default {
  props: ['url'], // 接收路由参数
  computed: {
    decodedUrl() {
      return decodeURIComponent(this.url)
    }
  },
  methods: {
    handleLoad() {
      // iframe 加载完成后的回调
    }
  }
}
</script>

<style scoped>
.iframe-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
iframe {
  width: 100%;
  height: 100%;
}
</style>

使用路由跳转

通过 router.push 传递编码后的 URL 参数：

// 跳转到 iframe 页面
this.$router.push({
  name: 'iframe',
  params: { 
    url: encodeURIComponent('https://example.com') 
  }
})

安全性增强措施

添加 sandbox 属性限制 iframe 权限：

<iframe 
  sandbox="allow-same-origin allow-scripts allow-popups"
  :src="decodedUrl"
/>

动态高度调整

通过 MutationObserver 实现自适应高度：

vue路由实现iframe

mounted() {
  const iframe = this.$el.querySelector('iframe')
  const observer = new MutationObserver(() => {
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px'
  })
  observer.observe(iframe.contentWindow.document.body, {
    attributes: true,
    childList: true,
    subtree: true
  })
}