首页 前端知识 vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案

vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案

2024-02-09 20:02:12 前端知识 前端哥 445 615 我要收藏

1.需求

这两天工作中遇到一个这样的需求,切换tab标签时,要求对应的tab页面不刷新,但是项目中加入了一部分含有iframe的页面,在切换路由的过程中,如果使用keep-alive是达不到缓存ifram嵌套的页面效果的。

2.使用keep-alive缓存不了iframe界面的原因

  • vue中的keep-alive

1>.原理:vue 的缓存机制并不是直接存储 DOM 结构,而是将 DOM 节点抽象成了一个个 VNode节点。因此,Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。

2>.参数:Keep-alive 组件提供了 include 和 exclude 两个属性,允许组件有条件的进行缓存。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

3>.iframe中keep-alive机制失效原因:iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来,在渲染时iframe页还是刷新的

3. vue中实现iframe内容缓存的思路

  • 保存iframe页里的节点信息我们很难去操作,这个时候我们就该想是否能在vue的route-view节点上动些手脚。
  • 我们可以在切换不含iframe的界面时使用vue路由,在切换含iframe页的界面时利用v-show来控制显示隐藏,使iframe的节点不被删除,以此来防止界面节点被重新更新,从而达到保存iframe节点数据的效果。

4. 解决步骤:

综上所述,主要思路就是利用v-show去控制对应tab的iframe显示隐藏,使iframe的节点不被删除,以此来防止界面节点被重新更新,从而达到iframe页面的缓存效果。

  • iframe页面对应的路由配置:如下:
  {
    path: '',
    component: Layout,
    redirect: 'indexNew1',
    hidden: true,
    children: [
      {
        path: 'indexNew1',
        component: (resolve) => require(['@/views/indexNew1'], resolve),
        meta: { title: ''}
      },
    ]
  },
  // 在这里需要找到Layout文件中对应的<router-view>

-根据上面的路由配置,找到了对应的layout组件中的router-view的引用,即appMain.vue页面

<template>
  <section class="app-main" :class="this.$route.path=='/tinyApp/tinyAppRate'?'app1':''">
    <transition name="fade-transform" mode="out-in">
      <keep-alive>
		// 这里加载的就是正常的vue页面
        <router-view v-if="this.$route.path!=='/indexNew1'" />
      </keep-alive>
    </transition>
    // 针对iframe嵌套的页面需要将封装的iframe组件引入,因为是多个嵌套的页面,所以这里需要循环生成
    <iframe-index 
      v-show="$route.query.id==item.id"
      v-for="item of tabSetList"
      :key="item.id"
      :newSrc="item.baseUrl"
    ></iframe-index>
    //这里的tabSetList数组就是你点击某菜单对应的此菜单信息的iframe相关属性
    //因为tab有删除功能,所以不能用下标做key值
  </section>
</template>
<script>
// 引入iframe组件
import iframeIndex from "@/views/indexNew1.vue";
export default {
  name: 'AppMain',
  components:{
    iframeIndex
  },
  data(){
    return{
      tabList:[],
      tabSetList:[],
    }
  },
  watch:{
    $route(){
      console.log('Rouer ------ ',this.$route)
    },
    //这里是根据我项目的需求写的具体逻辑,不用参考
  	'$store.state.tagsView.sceneViews'(newVal){
      this.tabList = [...newVal]
      this.tabSetList = this.tabList.filter((currentValue, currentIndex, selfArr) =>{
        return selfArr.findIndex(x =>x.name === currentValue.name) === currentIndex
      });
	}
  },
}
</script>
  • 封装一个对应的iframe显示的组件
// 这里只是放了部分代码 具体逻辑根据对应的需求添加即可
<template>
    <div class="dashboard-editor-container">
        <div style="width: 100%" class="itemflex-div">
          <iframe
            :src="newSrc"
            class="iframemain"
            allowfullscreen="true"
            id="iframeId"
          ></iframe>
        </div>
    </div>
</template>
<script>
export default {
  props:{
    newSrc:{
      type:String,
      default:''
    }
  },
};
</script>
  • 综上所述,就是实现多iframe嵌套页面在切换tab时可以缓存对应页面的信息
  • 注意:因为tab一版包括删除功能,所以在循环iframe组件时对应的key值不能用数组下标,取一个唯一值即可,这里我取的是id
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1571.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!