WZC2/fe/PC/src/layout/components/AppMain.vue

<template>
	<section class="app-main">
		<transition name="fade-transform" mode="out-in">
			<!-- 缓存页面 -->
			<keep-alive :max="20" v-if="!$route.meta.keepAlive" >
				<router-view :key="key" />
			</keep-alive>
			<!-- 不要缓存，即切换tab页就刷新 -->
			<router-view v-if="$route.meta.keepAlive" :key="key" />
		</transition>
		<!--iframe页-->
		<!-- <component
			v-for="item in hasOpenComponentsArr"
			:key="item.path"
			:is="item.name"
			v-show="$route.path.indexOf(item.path) > -1"
		></component> -->
	</section>
</template>

<script>
// import Vue from 'vue'
import Bus from '../Bus.js';
export default {
	name: "AppMain",
	// data() {
	// 	return {
	// 		componentsArr: []
	// 	}
	// },
	computed: {
		cachedViews() {
			return this.$store.state.tagsView.cachedViews;
		},
		key() {
			return this.$route.fullPath;
		},
		// 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
		// hasOpenComponentsArr() {
		// 	return this.componentsArr.filter(item => {
		// 	return item.hasOpen
		// 	});
		// }
	},
	// watch: {
	// 	$route() {
	// 		// 判断当前路由是否iframe页
	// 		this.isOpenIframePage();
	// 	}
	// },
	mounted() {
		// 设置iframe页的数组对象
		// setTimeout(() => {
		// 	const componentsArr = this.getComponentsArr();
		// 	componentsArr.forEach((item) => {
		// 		Vue.component(item.name, item.component);
		// 	});
		// 	this.componentsArr = componentsArr;
		// 	// 判断当前路由是否iframe页
		// 	this.isOpenIframePage();
		// }, 1000)

		// 关闭标签触发
		Bus.$on('removeCache', (name, view) => {
			this.removeCache(name, view);
		});
		//刷新标签触发
		Bus.$on('removeRedirect', (name, view) => {
			this.removeRedirect(name, view);
		})
	},
	beforeDestroy() {
		Bus.$off('removeCache');
		Bus.$off('removeRedirect');
	},
	methods: {
		// iframe 页面 缓存处理-----------------start
		// 根据当前路由设置hasOpen
		// isOpenIframePage() {
		// 	const target = this.componentsArr.find(item => {
		// 		return this.$route.path.indexOf(item.path) > -1
		// 	});
		// 	if (target && !target.hasOpen) {
		// 		target.hasOpen = true;
		// 	}
		// },
		// // 遍历路由的所有页面，把含有iframeComponent标识的收集起来
		// getComponentsArr() {
		// 	const activeReportManage = this.$store.getters.permission_routes.find(item => item.path == '/activeReportManage')
		// 	console.log('permission_routes', this.$store.getters.permission_routes)
		// 	console.log('activeReportManage', activeReportManage)
		// 	const reportForm = activeReportManage.children.find(item => item.path == 'reportForm').children
		// 	console.log('reportForm', reportForm)
		// 	// const reportForm = this.$store.getters.permission_routes.find(item => item.path == '/activeReportManage').children.find(item => item.path == 'reportForm').children
		// 	const iframeArr = []
		// 	reportForm.forEach(item => {
		// 		item.component = item.iframeComponent
		// 		iframeArr.push(item)
		// 	})
		// 	return iframeArr
		// },
		// iframe 页面 缓存处理-----------------end

		// 获取有keep-alive子节点的Vnode
		getVnode() {
			// 判断子集非空
			if (this.$children.length == 0) return false;
			let vnode;
			for (let item of this.$children) {
				// 如果data中有key则代表找到了keep-alive下面的子集，这个key就是router-view上的key
				if (item.$vnode.data.key) {
					vnode = item.$vnode;
					break;
				}
			}
			return vnode ? vnode : false;
		},
		//移除redirect组件缓存
		removeRedirect(view={}){
			const viewNew = {
				fullPath:`/redirect${view.fullPath}`,
				path:`/redirect${view.path}`
			}
			this.removeCache('closeSelectedTag',viewNew);
		},
		// 移除keep-alive缓存
		removeCache(name, view = {}) {
			let vnode = this.getVnode();
			if (!vnode) return false;
			let componentInstance = vnode.parent.componentInstance;
			// 这个key是用来获取前缀用来后面正则匹配用的
			let keyStart = vnode.key.split('/')[0];
			let thisKey = `${keyStart}${view.fullPath}`;
			let regKey = `${keyStart}${view.path}`;
			this[name]({ componentInstance, thisKey, regKey });
		},
		// 移除其他
		closeOthersTags({ componentInstance, thisKey }) {
			Object.keys(componentInstance.cache).forEach((key, index) => {
				if (key != thisKey) {
					// 1 销毁实例(这里存在多个key指向一个缓存的情况可能前面一个已经清除掉了所有要加判断)
					if (componentInstance.cache[key]) {
						componentInstance.cache[key].componentInstance.$destroy();
					}
					// 2 删除缓存
					delete componentInstance.cache[key];
					// 3 移除key中对应的key
					componentInstance.keys.splice(index, 1);
				}
			});
		},
		// 移除所有缓存
		closeAllTags({ componentInstance }) {
			// 1 销毁实例
			Object.keys(componentInstance.cache).forEach(key => {
				if (componentInstance.cache[key]) {
					componentInstance.cache[key].componentInstance.$destroy();
				}
			});
			// 2 删除缓存
			componentInstance.cache = {};
			// 3 移除key中对应的key
			componentInstance.keys = [];
		},
		// 移除单个缓存
		closeSelectedTag({ componentInstance, regKey }) {
			if(!componentInstance.cache)return
			let reg = new RegExp(`^${regKey}`);
			Object.keys(componentInstance.cache).forEach((key, i) => {
				if (reg.test(key)) {
					// 1 销毁实例
					if (componentInstance.cache[key]) {
						componentInstance.cache[key].componentInstance.$destroy();
					}
					// 2 删除缓存
					delete componentInstance.cache[key];
					// 3 移除key中对应的key
					componentInstance.keys.splice(i, 1);
				}
			});
		}
	}
};
</script>


<style lang="scss" scoped>
$appPadding:14px;
$appBack: #f3f4f8;
.app-main {
/* 84 = navbar + tags-view = 50 + 34*/
  height: calc(100vh - 84px);
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  background: $appBack;
  padding: $appPadding;
}

.fixed-header + .app-main {
  padding-top: 84px;
//   padding-top: 114px;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>