index.vue

<template>
  <section id="business_container">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>

    <component
      v-for="item in hasOpenComponentsArr"
      :key="item.name"
      :is="item.name"
      v-show="$route.path === item.path"
    ></component>
  </section>
</template>

<script>
import Vue from "vue";

import DzSys from "~/views/Layout/dz/DzSys.vue";
import { getDzSysMenu } from "~/views/Layout/dz/menus.js";

export default {
  name: "Business",
  watch: {
    $route() {
      if (this.$route.path.startsWith("/review")) {
        this.$store.commit("setMode", "display");
      } else {
        this.$store.commit("setMode", "normal");
      }

      this.componentsArr.forEach(comp => {
        if (!this.visitedViews.find(view => view.path === comp.path)) {
          comp.hasOpen = false
        }
      })
      // 判断当前路由是否iframe页
      this.isOpenIframePage();
    },
  },
  created() {
    console.log("进入业务交易界面");

    // 设置iframe页的数组对象
    const componentsArr = []
    const dzSysMenu = getDzSysMenu()
    this.getComponentsArr(componentsArr, dzSysMenu ? dzSysMenu.children : []);
    componentsArr.forEach((item) => {
        Vue.component(item.name, DzSys);
    });
    this.componentsArr = componentsArr;
    // 判断当前路由是否iframe页
    this.isOpenIframePage();
  },
  computed: {
    cachedViews() {
      return this.$store.state.TagsView.cachedViews;
    },
    visitedViews() {
      return this.$store.state.TagsView.visitedViews;
    },
    key() {
      return this.$route.path;
    },
    // 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
    hasOpenComponentsArr() {
      return this.componentsArr.filter(item => item.hasOpen);
    }
  },
  data() {
    return {
      componentsArr: []
    }
  },
  methods: {
    // 根据当前路由设置hasOpen
    isOpenIframePage() {
        const target = this.componentsArr.find(item => {
            return item.path === this.$route.path
        });
        if (target && !target.hasOpen) {
            target.hasOpen = true;
        }
    },
    // 遍历路由的所有页面，把含有iframeComponent标识的收集起来
    getComponentsArr(arr, menus) {        
        for (let i = 0; i < menus.length; i++) {
          const menu = menus[i];
          if (menu.children.length) {
            const tempArr = []
            this.getComponentsArr(tempArr, menu.children)
            arr.push(...tempArr)
          } else {
            arr.push({
              name: menu.value,
              path: menu.path,
              hasOpen: false, // 是否打开过，默认false
            })
          }
        }
    }
  }
};
</script>

<style>
#business_container {
  flex: 1;
  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}
#business_container .eContainer, #business_container .eContainer-search{
  box-sizing: border-box;
  height: 100%;
  width: 85%;
  margin: 0 auto;
  padding-top: 40px;
}



@media screen and (min-width: 2561px) {
    
#business_container .eContainer {
     width: 85%;
    }
}

@media screen and (min-width: 1921px) and (max-width: 2560px) {
   
    #business_container .eContainer {
     width: 90%;
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
   
#business_container .eContainer {
     width: 93%;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1440px) {
   
#business_container .eContainer {
     width: 95%;
    }
}

@media screen and (max-width: 1199px) {
   
#business_container .eContainer {
     width: 100%;
    }
}



#business_container .eContainer {
  background-color: #ffffff;
  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}
#business_container .eContainer .eContainer, 
#business_container .eContainer .eContainer-search, 
#business_container .eContainer-search .eContainer, 
#business_container .eContainer-search .eContainer-search{
  width: 100%;
  margin: 0;
  padding-top: 0;
  background-color: unset;
  box-shadow: unset;
}
/*
#business_container .eibs-tab {
  padding: 40px;
}
*/
#business_container .eibs::before, #business_container .eibs-tab::before,
#business_container .eibs::after, #business_container .eibs-tab::after {
  content: "";
  display: block;
  clear: both;
}

.eibs{
  margin-top: 20px;

}
</style>