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文件中对应的

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

  
    
      
		// 这里加载的就是正常的vue页面
        
      
    
    // 针对iframe嵌套的页面需要将封装的iframe组件引入，因为是多个嵌套的页面，所以这里需要循环生成
    
        
    


export default {
  props:{
    newSrc:{
      type:String,
      default:''
    }
  },
};