1. 简介 关于iframe标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题，但是有需求这样的 要求外嵌页面的内容保持缓存 项目中一不小心点他其它页面 再次切换回来 防止页面外嵌页面再次刷新。

2关于使用keep-alive缓存不了iframe界面原因
很多人第一想法就是会使用 keep-alive 去实现组件缓存，但是对iframe标签是行不通的，keepalive作为缓存组件这里不过多介绍，大多用于项目中 标签的嵌套 实现出口视图页面的缓存。项目中可以发现keepalive包裹的组件的确 只触发了一次生命周期，但是每次切换 iframe标签内嵌页面依旧会在浏览器中刷新。原因在于

1.Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个 VNode节点。因此，Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。
2.iframe中keep-alive机制失效原因：iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。

3解决方案
其实思路就很简单了，我们可以在切换不含iframe的界面时使用vue路由，在切换含iframe页的界面时利用v-show来控制显示隐藏，使iframe的节点不被删除，以此来防止界面节点被重新更新，从而达到保存iframe节点数据的效果。
简单点的实现方案就是你自己把单独需要用到iframe标签外嵌的页面 专门以组件的形式再模板页面中引入 与 出口一起同时渲染，并且根据路由的监听 控制它的显示隐藏， 注意这里必须是v-show来控制，不能移除dom节点 。
一下是自己写的简单demo，仅供参考

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- :include="cachedViews" -->
      <keep-alive>
        <router-view :key="key" v-if="status" />
      </keep-alive>
    </transition>
    <Hd v-show="this.$route.name === 'iframe'"></Hd>
  </section>
</template>
<script>
// import Vue from 'vue'
import Hd from '@/views/permission/ifarem'
export default {
  name: 'AppMain',
  components: {
  data () {
    return {
      componentsArr: [],
      status: true
  computed: {
    cachedViews () {
      return this.$store.state.tagsView.cachedViews
    key () {
      return this.$route.path
  watch: {
    $route () {
      console.log(this.$route.name, '$route')
      if (this.$route.name == 'iframe') {
        this.status = false
      } else {
        this.status = true
      // 判断当前路由是否iframe页
HD就是单独引入的iframe标签组件。方法很low，仅供实现效果。
				
最近手里有个项目需要用iframe来调用每天都会变化的页面，后来想到iframe会不会缓存页面呢，于是写了个demo论证了下，结果如下： 
iframe的src如果是静态页面，就有可能会缓存，因为静态页面有200和304状态 iframe的src如果是动态页面就不会缓存，因为动态页面的都是200状态 iframe的src为伪静态页面的话，需要分析伪静态页面会不会有304状态，有的话也会缓存 
希望对遇到同样问题的童鞋有帮助。
结合router缓存部分页面：
比较实用的例子：
思路：通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值。从而动态的确定A页面是否需要被缓存。
结合router缓存部分页面：
比较实用的例子：
思路：通过b
				
这两天遇到一个很奇怪的问题，一个页面嵌套了一个iframe页面，当这个页面提交后再次跳转到本页面时，原本iframe内的页面应该刷新数据的，结果在ie下面却没刷新（FF下没问题），必须手动F5或者新开一个浏览器标签页浏览才能刷新，否则在本页面的浏览器上按回车是没用的，查阅了很多资料，最后终于发现是iframe缓存机制在搞鬼，用以下方法即可解决：
&lt;script type="text/jav...
				
页面中嵌入iframe出现了缓存，带来的页面刷新问题
工作中碰到的问题
包含iframe的页面，iframe中存在登陆验证的问题。当通过iframe已经完成了登陆，此时iframe对应的服务异常上下电又恢复了服务时，这时再刷新整个页面，即使用新的登陆验证信息依然无法验证通过。
通过对iframe里请求的分析发现，刷新后请求头依然使用的是之前的验证信息（token和session）。
一般的做法
				
如果你想在 Vue 中使用 `iframe` 并进行缓存，可以使用 `keep-alive` 组件来实现。`keep-alive` 组件是 Vue 提供的一个抽象组件，可以用来缓存组件或者元素的状态，从而避免重复渲染和数据的重复获取。
具体来说，可以在 `keep-alive` 组件的 `include` 属性中指定需要缓存的组件或元素，如下所示：
```html
<keep-alive :include="['MyIframe']">
  <component :is="currentComponent"></component>
</keep-alive>
在上述代码中，我们将 `include` 属性设置为 `['MyIframe']`，表示只缓存名称为 `MyIframe` 的组件或元素。然后，在需要使用 `iframe` 的地方，可以在组件中定义一个 `iframe` 元素，并设置其 `name` 属性为 `MyIframe`，如下所示：
```html
<template>
    <iframe :src="url" name="MyIframe"></iframe>
</template>
这样，当 `iframe` 的 `src` 属性改变时，`keep-alive` 组件会自动缓存 `MyIframe` 元素的状态，从而避免重复渲染和数据的重复获取。
需要注意的是，在使用 `iframe` 时，由于 `iframe` 中的内容是独立的，因此可能会存在跨域问题，需要进行处理。另外，`iframe` 会在页面中创建一个新的文档流，可能会影响页面的布局和样式，需要进行调整。