vue嵌套iframe保留保存问题

描述

由于vue项目中切入了其他系统的iframe网址页面, 在本项目系统内部切换标签页时,现在新增了一个需求,要求保留打开的iframe页面的缓存数据,方便来回查看

解决

网上搜了很多,基本都是说用v-show来控制iframe页面的显示
由于存在两个iframe页面,所以用循环展示了,之前没用循环写死,发现打开不同iframe的时候会出现同一个页面

代码

参考网址 vue中使用keep- alive缓存机制，切换标签含有iframe标签的界面会被重新刷新

<router-view>的页面
// 项目本身的路由不太一样,所以仅供参考
<vueIframe
	v-for="item of tabSetList"
	:key="item.label"
	:newScr="item.value"
	v-show="$route.query.src?$route.query.src.indexOf(item.value)>-1:false">
</vueIframe>
...
import vueIframe from "@/compontents/iframe/main"
...
data(){
	...,
	tabList:[],
	tabSetList:[],
},
...,
watch:{
	'$store.state.tags.tagList':{
		handler(newVal){
			this.$nextTick(()=>{
				this.tabList = [...newVal];
				//根据项目需求,获取了所打开的标签中所有的iframe的页面
				this.tabSetList = this.tabList.filter((val,index,self)=>{
					return val.value.indexOf('http')>-1||val.value.indexOf('https')>-1
				})
			})
		},
		deep:true,
		immediate:true,
	}
}

<main.vue>
<iframe :src="getSrc(newSrc)" ref="iframe"></iframe>
...
props:['newSrc'],
methods:{
	getSrc(newScr){
		//根据自身项目需求调整生产和测试环境的iframe部署地址前缀,可不写
		return newSrc.indexOf('warning_info')!=-1?window.serverConfig.VUE_APP_HOST_URL+'warning_info':newScr;
	}
}