vue 内嵌iframe，＜keep-alive＞＜router-view/＞＜/keep-alive＞不能保存节点问题

问题描述：

在路由跳转时，如果当前页面嵌套了iframe，iframe嵌套的页面每次都会重新加载一遍，这样体验肯定不好的。

问题原因：

iframe标签存储在DOM中，而vue的缓存机制并不是直接存储 DOM 结构，导致vue中使用iframe无法对其进行缓存

解决方案：

利用隐藏和显示，不是真实的去切换。

修改的地方：

路由页面

父容器页面

<template>
  <div class="dashboard-container">

    <div style="flex-direction: row;display: flex;height: 60px;background-color: transparent;z-index: 999">
      <el-menu style="height: 50px;background-color: transparent;border-bottom-color: transparent" :router="true" :default-active="activeIndex" mode="horizontal" @select="handleSelect" text-color="#09BEE6" active-text-color="#43B5B5">

        <el-menu-item index="/threeModel"><i class="el-icon-message"/>三维模型</el-menu-item>
        <el-menu-item index="/costManagement"><i class="el-icon-user"/>造价管理</el-menu-item>
        <el-menu-item index="/qRcodeManagement"><i class="el-icon-mobile-phone"/>二维码管理</el-menu-item>
        <el-menu-item index="/accountManagement"><i class="el-icon-user"/>账号管理</el-menu-item>
      </el-menu>

    </div>
    <keep-alive><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 { mapGetters } from 'vuex'
import Vue from 'vue'


export default {
  name: 'Dashboard',
  data() {
    return {
      activeIndex: '/threeModel',
      userName: '',
      iframeArr: [],
      componentsArr: [] // 含有iframe的页面
    }
  },
  created() {
    this.$router.push('threeModel')

    // 设置iframe页的数组对象
    const componentsArr = this.getComponentsArr();
    componentsArr.forEach((item) => {
      Vue.component(item.name, item.component);
    });
    this.componentsArr = componentsArr;
    // 判断当前路由是否iframe页
    this.isOpenIframePage();
  },
  watch: {
    $route() {
      // 判断当前路由是否iframe页
      this.isOpenIframePage();
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    // 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
    hasOpenComponentsArr() {
      return this.componentsArr.filter(item => item.hasOpen);
    }
  },
  methods: {
    // 根据当前路由设置hasOpen
    isOpenIframePage() {
      const target = this.componentsArr.find(item => {
        return item.path === this.$route.path
      });
      if (target && !target.hasOpen) {
        target.hasOpen = true;
      }
    },
    // 遍历路由的所有页面，把含有iframeComponent标识的收集起来
    getComponentsArr() {
      const router = this.$router;
      const routes = router.options.routes;
      this.getIframe(routes)

      return this.iframeArr.map((item) => {
        const name = item.name || item.path.replace('/', '');
        return {
          name: name,
          path: item.path,
          hasOpen: false, // 是否打开过，默认false
          component: item.iframeComponent // 组件文件的引用
        }
      })
    },
    getIframe(arr) {
      arr.map(item => {
        if(item.iframeComponent) {
          this.iframeArr.push(item);
        }
        if(item.children && item.children.length > 0) {
          this.getIframe(item.children)
        }
      })
    },
  }
}
</script>