Vue iframe嵌套的页面实现路由缓存 实现keep-alive效果

本地页面用keep-alive路由缓存显示，iframe的页面用v-show显示

<template>
  <section class="app-main">
    <component
      :key="item.name"
      :style="{ height: height, minHeight: height }"
      v-show="item.meta.externalUrl.indexOf($route.path) > -1"
      v-for="item in hasOpenComponentsArr"
      :is="item.component"
    >
    </component>
    <keep-alive :include="cachedViews">
      <router-view
        :key="key"
        :style="{ height: height, minHeight: height }"
        v-show="handleShow(key)"
      />
    </keep-alive>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import Vue from "vue/dist/vue.js";
export default {
  name: "AppMain",
  created() {
    // 设置iframe页的数组对象
    const componentsArr = this.getComponentsArr();
    componentsArr.forEach((item) => {
      Vue.component(item.name, item.component);
    });
    this.componentsArr = componentsArr;
    // 判断当前路由是否iframe页
    this.isOpenIframePage();
    // this.isNowFunc();
    this.$bus.$on("closePage", () => {
      this.isOpenIframePage();
    });
  },
  data() {
    return {
      height: "calc(100vh - 93px)",
      componentsArr: [], // 含有iframe的页面
    };
  },
  computed: {
    ...mapGetters(["sidebarRouters"]),
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
    key() {
      return this.$route.path;
    },
    // 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
    hasOpenComponentsArr() {
      return this.componentsArr.filter((item) => item.hasOpen);
    },
    visitedViews() {
      return this.$store.state.tagsView.visitedViews;
    },
  },
  watch: {
    $route: {
      handler(val) {
        this.isOpenIframePage();
      },
      immediate: true,
    },
  },
  methods: {
    // 不渲染包含iframe的路由
    handleShow(key) {
      var flag = true;
      var index = this.componentsArr.findIndex(
        (v) => v.meta.externalUrl.indexOf(key) > -1
      );
      if (index != -1) {
        flag = false;
      }
      return flag;
    },
    // 根据当前路由设置hasOpen
    isOpenIframePage() {
      var index = this.componentsArr.findIndex((item) => {
        return item.meta.externalUrl.indexOf(this.$route.path) > -1;
      });
      if (index != -1) {
        this.componentsArr[index].hasOpen = true;
      }
      if (this.visitedViews.length > 0) {
        this.componentsArr.forEach((item, itemIndex) => {
          var index = this.visitedViews.findIndex(
            (v) => item.meta.externalUrl.indexOf(v.fullPath) > -1
          );
          if (index == -1) {
            this.componentsArr[itemIndex].hasOpen = false;
          }
        });
      }
    },
    // 遍历路由的所有页面，把含有iframeComponent标识的收集起来
    getComponentsArr() {
      const routes = this.sidebarRouters;
      const iframeArr = [];
      routes.filter((items) => {
        if (items.children) {
          items.children.forEach((item) => {
            if (item.meta && item.meta.externalUrl) {
              iframeArr.push({
                ...item,
                hasOpen: false,
                component: () => import("@/views/iframe/index"),
              });
            }
          });
        }
      });
      return iframeArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main {
  overflow: auto;
  width: 100%;
  position: relative;
  overflow: hidden;
}
</style>