vue+element项目中多tag时， iframe套第三方html页面，切换Tab时，iframe能不刷新吗？
appMain.vue
<!-- eslint-disable -->
<template>
<section class="app-main" :style="!isMobile ? 'padding-top:0px' : 'padding-top:0px'">
<transition name="fade-transform" mode="out-in">
<keep-alive>
<router-view :key="key" />
</keep-alive>
</transition>
</section>
</template>
<script>
/* eslint-disable */
export default {
name: 'AppMain',
computed: {
isMobile() {
const userAgent = navigator.userAgent.toLowerCase();
const mobileKeywords = ['mobile', 'android', 'iphone', 'ipad', 'ipod'];
for (let i = 0; i < mobileKeywords.length; i++) {
if (userAgent.indexOf(mobileKeywords[i]) !== -1) {
return true;
}
}
return false;
},
cachedViews() {
return this.$store.state.tagsView.visitedViews;
},
key() {
return this.$route.fullPath;
}
},
mounted() {
// 关闭标签触发
this.$bus.$on('removeCache', (name, view) => {
this.removeCache(name, view);
});
},
methods: {
// 获取有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;
},
// 移除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 }) {
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>
嵌入页面文件代码
<!-- eslint-disable -->
<template>
<div class="checkManage">
<iframe
style="width:100%;"
:src="src"
scrolling="no"
:style="{ height: boxHeight + 'px' }"
frameborder="0"
/>
</div>
</template>
<script>
/* eslint-disable */
import conf from '@/config/auditManagement'
export default {
name: "checkManage",
data() {
return {
src: '',
projectId: '',
projectAbbreviation: '',
// 初始化盒子高度
boxHeight: 400,
}
},
mounted() {
// 当组件挂载完成后，设置盒子高度
this.setBoxHeight();
// 添加窗口大小改变的监听事件
window.addEventListener('resize', this.setBoxHeight);
},
beforeDestroy() {
// 组件销毁前移除监听事件
window.removeEventListener('resize', this.setBoxHeight);
},
methods: {
setBoxHeight() {
// 设置盒子高度为浏览器视窗高度减去一个固定值（例如：200px）
this.boxHeight = window.innerHeight - 50;
},
srcUrl (){
this.src = conf.serverUrl + `/cims-ui/auditSystemback/index.html#projectManage?projectId=` + this.$route.query.projectId
// this.src = `localhost:8081/#/projectManage?projectId=` + this.$route.query.projectId
console.log(this.src, 'src')
}
},
created() {
console.log(this.$route, '-------')
this.srcUrl()
},
};
</script>
<style lang="scss" scoped>
</style>
