VUE 引入iframe

在Vue中引入iframe可以通过使用`<iframe>`标签来实现。可以在Vue组件中使用`<iframe>`标签，并将其`src`属性绑定到组件的数据属性上，以实现动态加载不同的iframe页面。同时，可以使用Vue Router来实现在不同的iframe页面之间进行路由跳转，而不需要刷新整个页面。

以下是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="tab in tabs" :key="tab.id" @click="selectTab(tab)">
        {{ tab.title }}
      </li>
    </ul>
    <iframe :src="currentTab.url" frameborder="0" width="100%" height="500"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, title: 'Tab 1', url: 'http://example.com/tab1' },
        { id: 2, title: 'Tab 2', url: 'http://example.com/tab2' },
        { id: 3, title: 'Tab 3', url: 'http://example.com/tab3' },
      ],
      currentTab: null,
    };
  },
  mounted() {
    // 初始化选中第一个标签页
    this.selectTab(this.tabs[0]);
  },
  methods: {
    selectTab(tab) {
      this.currentTab = tab;
      // 使用Vue Router进行路由跳转
      this.$router.push({ path: `/iframe/${tab.id}` });
    },
  },
};
</script>

在上面的示例代码中，我们使用了`<iframe>`标签来展示当前选中的标签页，同时使用了Vue Router来实现在不同的标签页之间进行路由跳转。在`selectTab`方法中，我们将当前选中的标签页赋值给`currentTab`属性，并使用Vue Router的`push`方法进行路由跳转。