添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
帅气的枕头  ·  python git库安装 - CSDN文库·  2 月前    · 
独立的汉堡包  ·  Mybatis + ...·  1 年前    · 
才高八斗的松球  ·  将React ...·  1 年前    · 

vue-element-admin项目中tagView嵌入iframe不刷新重载

最近使用vue-element-admin来开发项目,因为以前老项目太大,暂不重构,如要通过iframe嵌套在新项目中,通过router来重写url加载,但是业务需要切换菜单或者tagView不能刷新重载iframe页面,因此需要改造

一、vue-element-admin是通过keep-alive来缓存router-view组件内容,但是其router-view中的iframe是重新通过src加载,相当于iframe重载

- 解决方案:
 - iframe组件不走keep-alive和router-view,而是一直处在body中
 // AppMain.vue
 <transition name="fade-transform" mode="out-in">
  <div class="app-contain">
    <!-- iframe不走重新加载,而是隐藏,保证重载 -->
    <div v-show="isIframePage">
      <wallet-iframe />
	<!-- 非iframe,正常页面走router-view -->
    <keep-alive :include="cachedViews" :exclude="notCachedViews">
      <router-view v-if="isRefresh && !isIframePage" :key="key" />
    </keep-alive>
</transition>
//script
data(){
	return {
		isRefresh: true
computed() {
	isIframePage() {
	  // 是否iframe页面,目前全部是iframe
	  return !this.$route.meta.notIframe;

二、监听$route,收集iframe消息,存入Array中,通过当前路由来展示和隐藏

- 解决方案:
// iframeContain.vue
  <div class="iframe-contain">
	<el-card class="iframe-contant el-card-8">
	  <iframe 
		v-show="curIframeName === item.name" 
		v-for="item in iframeUrlArr" 
		:key="item.name " 
		id="frameBox" 
		:src="item.url" 
		class="frame-box" />
	</el-card>
  // script
  import { uniqBy } from 'lodash';
  data() {
	  curIframeName: '', // 当前iframe名称,唯一值
	  iframeUrlArr: [], // 收集所有打开的iframe
  watch: {
	$route: {
	  handler: function(route) {
		console.log('路由', route, this)
		this.curIframeName = route.name;
		this.iframeUrlArr.push({
		  name: route.name,
		  url: window.location.origin + (route.meta.specialUrl || route.path), // 根据自己项目来写
		// 去重,可自己写方法Object.keys, includes, push
		this.iframeUrlArr = uniqBy(this.iframeUrlArr, 'name')
	  immediate: true