vue对针对IFrame内嵌web页面的缓存

1、需求：

        现有一个内嵌web的页面，需要解决每次切换时，该页面展现的还是之前的操作节点，而不是重新刷新。

2、思路：

        - 使用keepAlive

        查了下资料，在路由的配置页面使用keepAlive是可以做到缓存的结果，但是不符合我的需求，既然提到了，就说一下怎么使用吧。

import { RouteRecordRaw } from 'vue-router';
import { Layout } from '@/router/constant';
import { HomeOutlined } from '@vicons/antd';
import { renderIcon } from '@/utils/index';

/**
 * @param name 路由名称, 必须设置,且不能重名
 * @param meta 路由元信息（路由附带扩展信息）
 * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
 * @param meta.disabled 禁用整个菜单
 * @param meta.title 菜单名称
 * @param meta.icon 菜单图标
 * @param meta.keepAlive 缓存该路由
 * @param meta.sort 排序越小越排前
 * */

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'home',
    redirect: '/home/index',
    component: Layout,
    meta: {
      sort: 0,
      isRoot: true,
      activeMenu: 'home_index',
      icon: renderIcon(HomeOutlined),
    },
    children: [
      {
        path: 'index',
        name: `home_index`,
        meta: {
          title: '首页',
          activeMenu: 'home_index',
          keepAlive: true
        },
        component: () => import('@/views/home/index.vue'),
      },
    ],
  },
];

export default routes;

在特定位置使用keepAlive，结合路由地址的配置，例如

<RouterView v-slot="{ Component, route }" >
      <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
      <component v-else :is="Component" />
  </RouterView>

keep-alive标签就是把组件缓存起来，它的原理是把需要缓存的页面的DOM节点变成VNode存到内存中，下次使用时再将VNode读取到DOM节点中实现了缓存，之所以我的web页面没办法使用是因为内嵌web页面使用了IFrame标签，它没办法做到这一步。 

这里的 keepAliveComponents就是需要缓存页面的name，这里有个坑需要踩一下，这里的name不是路由配置中的name，而是.vue的name，vue2中有个给组件命名的地方：

export default {
  name: 'HelloWorldComponent',
  data() {
    return {
      message: 'Hello, World!'
    };
  }
};

这里的HelloWorldComponent就是name值，而我使用的是vue3往往会忽略这一个内容，所以在测试的时候出现了错误，vue3命名方法：

defineOptions({
    name: 'HelloWorldComponent'
})

缓存的vue页面只有在第一次加载时有onMounted会执行，后续执行的是onActivated和onDeactivated方法，keep-alive除了 :include 还有 :exclude 和 :max ，这里的用法不多做叙述。

- 使用v-show

其实实现方法很简单，只需要把内嵌的web页面，单独拿出来，然后使用隐藏就好了，它的原理是我第一次点击时，加载该页面，切换其它路由时，我只需要判断name是否是当前路由，将其隐藏起来就行了，它的本质是还在，但是没有达到条件不可见而已：

<template>
  <RouterView v-slot="{ Component, route }" >
    <template v-if="!iframeRoute.some(item => item.name === route.name)">
      <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
      <component v-else :is="Component" />
    </template>
  </RouterView>

  
  <template v-for="item in iframeRoute" :key="item.name">
    <IFrame v-show="item.name === currentRoute.name"  :frameSrc="item.meta.frameSrc" />
  </template>

</template>

这里需要注意，要把IFrame相关的组件从RouterView中剔除出去，多个IFrame的话就通过 v-for 生成多个就可以了，是不是很简单呀！

注意：这里的IFrame 是封装的组件，不然直接使用可能会出现src冲突，导致多个url共用一个框架，这样肯定是不行的。