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共用一个框架，这样肯定是不行的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。