vue中iframe如何传值（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"; 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