vue下iframe标签页,切换标签页,iframe不重载

实现这个功能需要用到Vue的动态组件和keep-alive组件。

1. 在Vue中使用动态组件和keep-alive组件来加载iframe标签页。

<template>
  <div>
    <ul>
      <li @click="activeTab = 'tab1'">Tab 1</li>
      <li @click="activeTab = 'tab2'">Tab 2</li>
      <li @click="activeTab = 'tab3'">Tab 3</li>
    </ul>
    <keep-alive>
      <component :is="activeTab"></component>
    </keep-alive>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'

export default {
  components: {
    Tab1,
    Tab2,
    Tab3
  },
  data() {
    return {
      activeTab: 'tab1'
    }
  }
}
</script>

2. 在每个Tab组件中使用iframe来加载外部页面，并使用Vue的keep-alive组件来保持页面状态不变。

<template>
  <div>
    <iframe v-if="show" :src="url" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com/',
      show: false
    }
  },
  activated() {
    this.show = true
  },
  deactivated() {
    this.show = false
  }
}
</script>

3. 当切换标签页时，Vue会自动调用组件的activated和deactivated钩子函数，从而实现不重载iframe页面的效果。