VUE项目中iframe缓存

1.业务需求

        在vue项目中某个页面,需要引入帆软报表,此时使用了iframe标签,成功引入了帆软报表并展示.

但是此时测试提出了新的问题,即当切换不同页面标签时,存在iframe标签的页面会刷新,iframe标签中的帆软报表里查询的数据也刷新了.

2.查询原因

        起初以为是缓存没有生效,但是除了iframe标签外,页面上的其他数据全部都在,所以keep-alive周期存在,只不过对iframe标签不生效.遂查阅相关资料,了解到keep-alive对iframe是不生效的,于是遍寻解决办法.

3.解决方法

        在APP.vue页面中,将钳有iframe标签的页面,作为组件引入,并写在keep-alive标签之外.

<template>
  <div id="app">
    <nav>
      <router-link to="/ifra">Iframe</router-link>
      <router-link to="/Iframe1">Iframe1</router-link>
      <router-link to="/index">Home</router-link>
    </nav>
      <keep-alive>
        <!-- Vue的路由 -->
        <router-view></router-view>
      </keep-alive>

      <!-- iframe页面 -->
      <Iframe v-show="$route.path == '/ifra'"></Iframe>
      <Iframe11 v-show="$route.path == '/Iframe1'"></Iframe1>
  </div>
</template>

<script>
import Iframe from './components/Iframe';
import Iframe1 from './views/Iframe1';
  export default{
    components: {
      Iframe,
      Iframe1
    },
    computed: {
    },
    mounted() {
    }
  }  
</script>

在路由页面,需要将引入的路由内容更改:

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/HomeView',
    name: 'HomeView',
    component: HomeView
  },
  {
    path: '/Iframe',
    name: 'Iframe',
    // component: () => import('../components/Iframe.vue')
  },
  {
    path: '/Iframe1',
    name: 'Iframe1',
    // component: () => import('../views/Iframe1.vue')
  },
]

注意,此时index.js中,需要将引入的component注释掉,才能生效.

4.总结

以上为查阅资料后,自己实现的,因为走了点弯路,所以自己总结一下记录出来,以记录.