vue 项目中用iframe嵌入html页面

在 Vue 项目中使用 iframe 嵌入 HTML 页面可以使用以下步骤：

1. 在 Vue 组件中添加一个 iframe 标签，例如：

<template>
  <div>
    <iframe
      ref="myIframe"
      src="http://example.com"
      frameborder="0"
      width="100%"
      height="600px"
    ></iframe>
  </div>
</template>

在这个示例代码中，我们设置了 iframe 的 src 属性为 http://example.com，也可以设置为其他 URL。

2. 在 Vue 组件中添加一个方法来实现 iframe 的动态加载，例如：

<script>
export default {
  methods: {
    loadIframe() {
      const myIframe = this.$refs.myIframe;
      myIframe.contentWindow.location.reload();
    },
  },
};
</script>

在这个示例代码中，我们定义了一个名为 `loadIframe` 的方法，它通过 `this.$refs.myIframe` 获取到 iframe 元素，并使用 `contentWindow.location.reload()` 方法来重新加载 iframe 页面。

3. 在需要重新加载 iframe 页面的时候，调用 `loadIframe` 方法即可，例如：

<template>
  <div>
    <button @click="loadIframe">重新加载</button>
    <iframe
      ref="myIframe"
      src="http://example.com"
      frameborder="0"
      width="100%"
      height="600px"
    ></iframe>
  </div>
</template>

在这个示例代码中，我们添加了一个按钮，并在点击按钮时调用 `loadIframe` 方法来重新加载 iframe 页面。

需要注意的是，由于浏览器的同源策略，可能会导致加载外部页面时出现跨域问题，需要在后端设置允许跨域访问的响应头。