vue对IFrame内嵌web页面的缓存实现过程

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;

<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>

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

defineOptions({
    name: 'HelloWorldComponent'
})

<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>