在Vue中实现不刷新的iframe页面的方案

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';

// 引入需要展示的iframe组件
import F1 from './components/F1.vue';
import F2 from './components/F2.vue';

Vue.use(VueRouter);

// 配置路由
const routes = [
  {
    path: '/f1',
    name: 'f1',
    iframeComponent: F1, // 该页面包含iframe
  },
  {
    path: '/f2',
    name: 'f2',
    iframeComponent: F2, // 该页面包含iframe
  },
  {
    path: '/index',
    component: { template: '<div>Index Page</div>' }
  }
];
​
const router = new VueRouter({
  routes
});
​
new Vue({
  render: h => h(App),
  router
}).$mount('#app');

<template>
  <div>
    <!-- Vue的router-view -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
​
    <!-- 动态渲染iframe页面 -->
    <component
      v-for="item in hasOpenComponentsArr"
      :key="item.name"
      :is="item.name"
      v-show="$route.path === item.path"
    ></component>
  </div>
</template>
​
<script>
import Vue from 'vue/dist/vue.js';
​
export default {
  data() {
    return {
      componentsArr: [] // 存储所有含有iframe的页面
    };
  },
  created() {
    // 获取路由配置中的iframe页面，并注册组件
    const componentsArr = this.getComponentsArr();
    componentsArr.forEach((item) => {
      Vue.component(item.name, item.component);
    });
    this.componentsArr = componentsArr;
    this.isOpenIframePage(); // 检查当前路由是否是iframe页面
  },
  watch: {
    $route() {
      // 路由变化时更新显示的iframe页面
      this.isOpenIframePage();
    }
  },
  computed: {
    // 实现懒加载，只渲染已打开过的iframe页面
    hasOpenComponentsArr() {
      return this.componentsArr.filter(item => item.hasOpen);
    }
  },
  methods: {
    // 判断当前路由是否是iframe页面，并设置`hasOpen`标志
    isOpenIframePage() {
      const target = this.componentsArr.find(item => item.path === this.$route.path);
      if (target && !target.hasOpen) {
        target.hasOpen = true;
      }
    },
    // 获取所有路由配置中含有iframeComponent的页面
    getComponentsArr() {
      const router = this.$router;
      const routes = router.options.routes;
      const iframeArr = routes.filter(item => item.iframeComponent);
      
      return iframeArr.map((item) => {
        const name = item.name || item.path.replace('/', '');
        return {
          name: name,
          path: item.path,
          hasOpen: false, // 是否已打开过
          component: item.iframeComponent // iframe组件引用
        };
      });
    }
  }
};
</script>

<template>
  <div id="app">
    <div class="nav">
      <router-link class="router" to="/f1">Go to F1</router-link>
      <router-link class="router" to="/f2">Go to F2</router-link>
      <router-link class="router" to="/index">Go to Index</router-link>
    </div>

    <!-- 使用新的iframe-router-view组件 -->
    <iframe-router-view></iframe-router-view>
  </div>
</template>

<script>
import F1 from './components/F1';
import F2 from './components/F2';
import IframeRouterView from './components/iframe-router-view.vue';

export default {
  name: 'App',
  components: {
    F1,
    F2,
    IframeRouterView
  }
};
</script>

class IframeManager {
  constructor() {
    if (IframeManager.instance) {
      return IframeManager.instance;
    }
    this.iframes = new Map();
    IframeManager.instance = this;
    return this;
  }

  /**
   * 创建 iframe
   * @param {string} id - 唯一标识符 必填
   * @param {string} src - iframe 的 URL 必填
   * @param {Object} styles - 自定义样式  可选
   */
  createIframe(id, src, styles = {}) {
    if (this.iframes.has(id)) {
      const iframe = this.iframes.get(id);
      iframe.style.display = 'block';
      return;
    }
    const iframe = document.createElement('iframe');
    iframe.id = id;
    iframe.src = src;
    iframe.frameBorder = '0';

    const defaultStyles = {
      position: 'absolute',
      top: '113px',
      right: '0',
      width: 'calc(100% - 210px)',
      height: 'calc(100% - 113px)',
      overflowY: 'auto',
      borderRadius: '10px 0 0 10px',
      zIndex: '1000',
      display: 'block',
    };

    Object.assign(iframe.style, { ...defaultStyles, ...styles });
    document.body.appendChild(iframe);
    this.iframes.set(id, iframe);
  }

  /**
   * 隐藏 iframe
   * @param {string} id - iframe 的唯一标识符 必填
   */
  hideIframe(id) {
    const iframe = this.iframes.get(id);
    if (iframe) {
      iframe.style.display = 'none';
    }
  }

  /**
   * 销毁 iframe
   * @param {string} id - iframe 的唯一标识符
   */
  destroyIframe(id) {
    const iframe = this.iframes.get(id);
    if (iframe) {
      iframe.remove();
      this.iframes.delete(id);
    }
  }

  /**
   * 销毁所有 iframe
   */
  destroyAllIframes() {
    this.iframes.forEach((iframe, id) => {
      iframe.remove();
      this.iframes.delete(id);
    });
  }
}
const iframeManager = new IframeManager();
export default iframeManager;