本地页面用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;},// 根据当前路由设置hasOpenisOpenIframePage() {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>
