首先router数据需要改动，增加iframe的标识，什么字段自己定义，可以在meta里也可以在外面随意。例如我这里通过iframeComponent进行判断
const routes = [
path: '/f1',
name: 'f1',
iframeComponent: () => import('@/views/service/service-iframe')// 用于标识是否含有iframe页
path: '/f2',
name: 'f2',
iframeComponent: () => import('@/views/service/service-iframe') // 用于标识是否含有iframe页
path: '/index',
component: { template: '<div>Index</div>' }
改造入口文件，把router-view改成对封装view的引用
封装IframeRouterVIew文件，也是主要代码
<template>
<div class="ant-pro-grid-content-page">
<keep-alive>
<router-view></router-view>
</keep-alive>
<!-- iframe页 -->
<template v-if="hasOpenComponentsArr?.length">
<component
v-for="item in hasOpenComponentsArr"
:key="item.name"
:is="item.name"
:linkUrl="item?.meta.linkUrl" // 主要：通过props对同一个iframe实例的src进行控制
v-show="$route?.path === item?.path"
></component>
</template>
</template>
<script>
import Vue from 'vue'
import { mapState } from 'vuex'
export default {
name: 'IframeRouterView',
created() {
// 设置iframe页的数组对象
const componentsArr = this.getComponentsArr()
componentsArr.forEach((item) => {
Vue.component(item.name, item.component)
this.componentsArr = componentsArr
// 初始化判断当前路由是否iframe页
this.isOpenIframePage()
data() {
return {
componentsArr: [], // 含有iframe的页面
watch: {
$route() {
// 判断当前路由是否iframe页
this.isOpenIframePage()
computed: {
...mapState({
// 动态主路由
mainMenu: (state) => state.permission.addRouters,
// 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
hasOpenComponentsArr() {
return this.componentsArr.filter((item) => item.hasOpen);
methods: {
// 根据当前路由设置hasOpen
isOpenIframePage() {
const target = this.componentsArr.find((item) => {
return item?.path === this.$route.path
if (target && !target.hasOpen) {
target.hasOpen = true
getComponentsArr() {
const iframeArr = this.handleIframe(this.mainMenu, [])
return iframeArr.map((item) => {
return {
hasOpen: false, // 是否打开过，默认false
...item,
component: item.iframeComponent // 组件文件的引用
handleIframe(menu, newMenu) {
menu.forEach((item, index) => {
// push所有的iframe节点
if (item?.iframeComponent) {
newMenu.push(item)
if (item?.children?.length) {
this.handleIframe(item?.children, newMenu)
return newMenu
</script>
<style lang="less">
</style>
service-iframe.vue 代码就很简单了
<template>
<div class="inframe">
<iframe style="border: none" width="100%" height="100%" v-bind:src="linkUrl"></iframe>
</template>
<script>
export default {
name: 'service-iframe',
props: {
linkUrl: {
type: String,
default: '',
data() {
return {}
computed: {
mounted() {
</script>
<style lang="less" scoped>
.inframe {
height: calc(100% - 2.6875rem);
</style>
总结的可能有些不详细， 具体的代码都在上面，大家可以自行更改实验，如果有问题或者更好的方案，欢迎评论沟通。
最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。
Vue的keep-alive原理
要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。 另外
1.简介 关于ifarem标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题，但是有需求这样的 要求外嵌页面的内容保持缓存 项目中一不小心点他其它页面 再次切换回来 防止页面外嵌页面再次刷新。
2关于使用keep-alive缓存不了iframe界面原因
很多人第一想法就是会使用 keep-alive 去实现组件缓存，但是对iframe标签是行不通的，keepalive作为缓存组件这里不过多介绍，大多用于项目中 标签的嵌套 实现出口视图页面的缓存。项目中可以发现keepalive包裹
打野在A页面野区进行一波骚操作打了一只蓝爸爸，然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸，然后他又回到A野区，希望A野区还是只有一只蓝爸爸被打的状态，其他野没被偷
在路由里面设置需要缓存的页面
使用keep-alive属性包裹需要缓存的页面使用v-if判断，为true的是需要缓存的，false是不需要缓存的
在需要缓存的页面设置导航钩子，在A野区离开时将值设置为false保证离开当前野区不被偷
在其他野区浪一波离开时设置为true,保证回到A野区的时候野区不被刷新，还是原来的状态
补充知识：vue keep – alive 使用只有从固
1.在支持ASP的服务器上解开本软件包，首页地址为：index.asp。
2.数据库文件为smlink.asp文件，本数据库为access2000格式。建议更改为不容易被猜到的名字。
3.打开config.asp文件，设置您的数据库文件名(如果有修改的话)，网站名称、地址、说明，管理员用户名、密码等等。
4.你可以用两种方式在首页使用此系统：
①包含文件：
<iframe src="目录/link.asp" width=778 height=120 border=0 frameborder=0 marginheight="0" marginwidth="0" scrolling="no"></iframe>
其中高度height可根据实际情况进行调整。
如果觉得样式和网站首页不符，可修改style.css文件中的配置。
②调用文件：
<script src="目录/js.asp"></script>，界面样式可自己设计。
5.头部文件top.asp和底课募⺷nder.asp可自行设计为符合网站样式。
6.后台管理地址为：admin_login.asp。默认管理员账号:yz0511，密码:8357511。
管理密码：
请在config.asp里面修改！
☆主要功能☆
1.用户可自行注册，登陆网站信息。
2.友情链接是按申请链接的网站平均每天点进次数的多少来排列顺序的。点击越多，排名越前，前x名(可在config.asp中设置)可以显示图标，其它则显示文字。
3.当申请链接的网站平均每天点进次数大于指定的数额(可在config.asp中设置)后，即会在首页显示。
4.管理员和用户均可以查看所有网站的总点入、总点出，今日点入，今日点出，平均点入、平均点出等信息，并有多达10种的排序方法。
5.用户登陆后可修改网站的资料，查看最近3天的点入点出记录。
1.管理员登陆后台后，可用10种排序方式显示各个网站的信息，调整各类信息，删除非法的网站。
2.初始化功能，可定期进行单用户初始化或者全部初始化。初始化后，所有数据将被清零，并从该天起开始重新统计。请谨慎操作！
3.批量删除站点功能，可以批量删除指定天数前注册总点击进入数小于指定数量的站点。
4.批量删除点击记录功能，可以删除指定天数前的点击记录(用户3天内的点入点出记录不会被删除)。
4.可查看所有用户的点入点出记录，也可单独查看点入或点出的记录，也可单独查看某一用户的点入点出记录。
5.在线压缩数据库，建议每隔一段时间(每周)压缩一次。
系统对链接双方都是公平的，同一IP隔24小时(可在config.asp中设置)后点击才继续计数，可有效防止****的发生。。
显示友情链接的页面采用了缓存技术，您可以在config.asp中设定缓存的时间，默认为30分钟，其实可以设置为更大的值。在没有用户点入的情况下，每隔设定的时间才会再读一次数据库，而当有用户点入的情况下，缓存会立刻清空，这样就保证了友情链接页面显示的数据始终是最新的:)
☆更新说明☆
1.修正一个较大的漏洞。(040801)
2.更新了缓存类的程序代码。(040805)
3.点入点出时间精确到秒，这样按点入点出排序才有意义。(040806)
4.查询网站首页增加今日点入、总计点入、今天点出、总计点出四大排行，只在搜索所有网站时才显示。这将有效提高链接网站的点出量。(040805)
5.管理区增加更新缓存的功能，使link.asp和js.asp立刻显示最新的数据。(040805)
6.将inp和outp字段类型由双精度改为单精度。(040806)
7.同一IP隔指定小时后点击才继续计数，可有效防止****的发生。(040805-040807)
8.重写"重获链接代码"页的程序。(040808)
9.点击记录中的IP地址加上了查询此IP地址所在区域的链接(我站提供的IP地址查询系统)。(040805)
10.优化了一些代码。
在Vue 3中，可以使用缓存技术来实现对iframe的缓存。
首先，在Vue组件中，可以使用computed属性来定义一个缓存对象，用于存储iframe的内容。这样，每次组件重新渲染时，只会重新加载并渲染iframe的内容，而不会重新请求。
其次，在组件的template中，可以使用v-if指令来根据缓存对象的状态来判断是否需要加载iframe。如果缓存对象中有内容，则使用v-if指令显示iframe，否则不显示。
再次，可以使用Vue的生命周期钩子函数created来实现对iframe内容的缓存。在created函数中，可以使用JavaScript中的DOM操作方法，获取到iframe的内容，并将其保存到缓存对象中。
最后，可以在组件的options中使用keep-alive组件来实现对整个组件的缓存。这样，当组件被切换时，不会销毁和重新创建，而是只触发activated和deactivated钩子函数。
总结来说，实现vue3中iframe的缓存主要依赖于computed属性、v-if指令、created生命周期函数以及keep-alive组件。通过这些方法，可以在页面渲染时对iframe内容进行缓存，从而提高页面加载速度和用户体验。
CSDN-Ada助手:
JS防抖和节流
CSDN-Ada助手:
yarn 错误There appears to be trouble with your network connection. Retrying
CSDN-Ada助手:
