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

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";exportdefault{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>exportdefault{props:{newSrc:{type:String,default:''}},};</script>

• 综上所述，就是实现多iframe嵌套页面在切换tab时可以缓存对应页面的信息
• 注意：因为tab一版包括删除功能，所以在循环iframe组件时对应的key值不能用数组下标，取一个唯一值即可，这里我取的是id