vue 嵌入 grafana vue 嵌入iframe加缓存

1.简介 关于ifarem标签一般用于项目内外嵌页面。比如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: {
    Hd
  },
  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，仅供实现效果。