iframe 套vue页面

要在iframe中嵌套Vue页面，你可以按照以下步骤进行操作：

1. 在你的Vue项目中创建一个包含Vue组件的HTML文件，例如test.html。
2. 在test.html中引入Vue.js文件，并创建一个包含input框和搜索按钮的区域。当按钮被点击时，通过加载iframe来嵌套Vue页面。
3. 在Vue的methods中创建一个函数，比如getExamReport()。在这个函数中，设置iframe的src属性为你要嵌套的Vue页面的地址，并设置iframe的高度和宽度。
4. 最后，在Vue组件的模板中添加一个div容器，用来显示嵌套的iframe。

以下是示例代码，演示了如何在Vue项目中通过iframe嵌套Vue页面：

<template>
  <div>
    <!-- 条件搜索区 -->
    <div>
      <el-input v-model="CourseId" clearable placeholder="请输入条件"></el-input>
      <el-button type="primary" @click="getExamReport">搜索</el-button>
    </div>
    
    <!-- 内容展示区 -->
    <div class="main-content">
      <iframe id="refFrame" width="0" height="0"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      CourseId: '',
    };
  },
  methods: {
    getExamReport() {
      const url = `http://xxx.html?CourseId=${this.CourseId}`;
      document.getElementById("refFrame").src = url;
      document.getElementById("refFrame").height = 640;
      document.getElementById("refFrame").width = 360;
    },
  },
};
</script>

请注意，上述示例代码中的url需要更改为你要嵌套的Vue页面的实际地址。同时，你也可以根据需要自定义iframe的高度和宽度。

希望以上信息对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [在vue中实现嵌套页面(iframe)](https://download.csdn.net/download/weixin_38608378/12924634)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [HTML页面通过iframe嵌套Vue项目](https://blog.csdn.net/m0_37508531/article/details/109966709)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]