keep-alive缓存不了iframe

最近做了个项目,其中有个页面是由 iframe 嵌套了一个另外的页面,在运行的过程中发现 KeepAlive 并不生效,每次切换路由都会触发 iframe 页面的重新渲染,代码如下:

  <router-view v-slot="{ Component }"><keep-alive :include="keepAliveList"><component :is="Component"></component></keep-alive></router-view>

看起来并没有什么问题,并且其他非 iframe 实现的页面都是可以被缓存的,因此可以推断问题出在 iframe 的实现上。

我们先了解下 KeepAlive

KeepAlive (熟悉的可跳过本节)

被 KeepAlive 包裹的组件不是真的卸载,而是从原来的容器搬运到另外一个隐藏容器中,实现“假卸载”, 当被搬运的容器需要再次挂载时,应该把组件从隐藏容器再搬运到原容器,这个过程对应到组件的生命周期就是 activated 和 deactivated

keepAlive 是需要渲染器支持的,在执行 mountComponent 时,如果发现是 __isKeepAlive 组件,那么会在上下文注入 move 方法。

function mountComponent(vnode, container, anchor) {/**... */const instance = {/** ... */state,props: shallowReactive(props),// KeepAlive 实例独有keepAliveCtx: null};const isKeepAlive = vnode.__isKeepAlive;if (isKeepAlive) {instance.keepAliveCtx = {move(vnode, container, anchor) {insert(vnode.component.subTree.el, container, anchor);},createElement};}
}

原因

通过上面的了解,我们知道,KeepAlive 缓存的是 vnode 节点,vnode 上面会有对应的真实DOM。组件“销毁”时,会将真实 DOM 移动到“隐藏容器”中,组件重新“渲染”时会从 vnode 上取到真实 DOM,再重新插入到页面中。这样对普通元素是没有影响的,但是 iframe 很特别,当其插入到页面时会重新加载,这是浏览器特性,与 Vue 无关。

解决方案

思路:路由第一次加载时将 iframe 渲染到页面中,路由切换时通过 v-show 改变显/隐。

  1. 在路由注册时,将 component 赋值为一个空组件
      {path: "/chathub",name: "chathub",component: { render() {} }, // 这里写 null 时控制台会出 warning,提示缺少 render 函数},
    
  2. 在 router-view 处,渲染 iframe,通过 v-show 来控制显示隐藏
      <ChatHub v-if="chatHubVisited" v-show="isChatHubPage"></ChatHub><router-view v-slot="{ Component }"><keep-alive :include="keepAliveList"><component :is="Component"></component></keep-alive></router-view>
    
  3. 监听路由的变化,改变 iframe 的显/隐
    const isChatHubPage = ref(false)
    // 这里是个优化,想的是只有页面访问过该路由才渲染,没访问过就不渲染该组件
    const chatHubVisited = ref(false) watch(() => routes.path,(value) => {if (value === '/chathub') {chatHubVisited.value = trueisChatHubPage.value = true} else {isChatHubPage.value = false}},{immediate: true}
    )
    
  4. ChatHub.vue组件代码(有单个或者多个iframe情况)
    <template><div class="iframe-container"><iframev-for="(item, index) in iframeList"v-show="showIframe(item, index)":key="item.url":src="item.url"frameborder="0"></iframe></div>
    </template>
    <script lang="ts" setup>
    export default {name: "ChatHub",
    };
    import { ref, reactive } from "vue";
    import { useRoute, useRouter } from "vue-router";
    const route = useRoute();const iframeList = reactive([{name: 1, url: "https://xxx"},{name: 2, url: "https://yyy"}
    ])// 是否显示
    const showIframe = (item, index) => {if (route.query.url === item.url) {return true;} else {return false;}
    };</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879350.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python设计一个带有简单界面的计算器】

为了设计一个带有简单界面的计算器&#xff0c;我们可以使用Python的图形用户界面&#xff08;GUI&#xff09;库&#xff0c;比如Tkinter。Tkinter是Python的标准GUI库&#xff0c;它提供了一个快速且简单的方式来创建窗口应用程序。 下面是一个使用Tkinter设计的简单计算器的…

深入解析Go语言的类型方法、接口与反射

Go语言作为一门现代编程语言&#xff0c;以其简洁高效的特性受到广大开发者的喜爱。在本文中&#xff0c;我们将深入探讨Go语言中的类型方法、接口和反射机制。通过丰富的代码示例和详尽的解释&#xff0c;帮助您全面理解这些关键概念&#xff0c;并在实际开发中灵活运用。 一…

速盾:高防 cdn 分布式防御攻击?

在当今数字化时代&#xff0c;网络安全问题日益凸显&#xff0c;各种网络攻击手段层出不穷。为了保护企业和个人的网络资产安全&#xff0c;高防 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;成为了一种重要的防御手段。其中&#xff0c;分布…

Django笔记一:搭建Django环境与URL路径访问

博主之前学从Java后端开发&#xff0c;后面获取到读研资格&#xff0c;想着未来转算法岗&#xff0c;初学Python&#xff0c;发现Python还挺有趣的&#xff0c;由于之前所学后端缘故&#xff0c;有点后端情节&#xff0c;想学习一下Django框架&#xff08;python的web框架&…

人工智能和机器学习:探讨人工智能和机器学习的最新发展、应用、挑战和未来趋势

人工智能和机器学习是当前科技领域的热点话题&#xff0c;其最新发展、应用、挑战和未来趋势备受关注。 最新发展&#xff1a; 人工智能和机器学习技术在近年来得到了快速发展&#xff0c;尤其是深度学习技术的广泛应用。例如&#xff0c;深度学习在图像识别、语音识别、自然语…

Superset二次开发之源码 run-server.sh 分析

背景&#xff1a; 如果基于docker方式部署Superset项目&#xff0c;Dockerfile文件末尾指向了docker-ci.sh&#xff0c;而docker-ci.sh 脚本又指向了run-server.sh。因此我们重点分析一下run-server脚本 路径 docker\run-server.sh #!/usr/bin/env bashHYPHEN_SYMBOL-gunicorn…

react 基础语法

前置知识 类的回顾 通过class关键字定义一个类 类名首字母大写 class类有constructor构造器 new 一个类得到一个实例 类还有方法&#xff0c;该方法也会在其原型上 static静态数据&#xff0c;访问静态属性通过 类名.id getter和setter getter&#xff1a;定义一个属性&…

网络学习-eNSP配置VRRP

虚拟路由冗余协议(Virtual Router Redundancy Protocol&#xff0c;简称VRRP) VRRP广泛应用在边缘网络中&#xff0c;是一种路由冗余协议&#xff0c;它的设计目标是支持特定情况下IP数据流量失败转移不会引起混乱&#xff0c;允许主机使用单路由器&#xff0c;以及即使在实际…

Rust 所有权 简介

文章目录 发现宝藏1. 所有权基本概念2. 所有权规则3. 变量作用域4. 栈与堆4.1 栈&#xff08;Stack&#xff09;4.2 堆&#xff08;Heap&#xff09; 5. String类型5.1 String 类型5.2 String 的内存分配5.3 所有权与内存管理5.4 String 与切片 6. 变量与数据交互方式6.1 移动&…

全球NAND原厂闪存市场格局变化

根据市场研究机构TrendForce的最新跟踪报告&#xff0c;三星&#xff08;Samsung&#xff09;和SK海力士&#xff08;SK hynix-Solidigm&#xff09;在过去的一个季度中扩大了他们在NAND闪存市场的份额&#xff0c;这主要得益于抢占了铠侠&#xff08;Kioxia&#xff09;与西部…

小目标检测顶会新思路!最新成果刷爆遥感SOTA,参数小了18倍

遥感领域的小目标检测一直是个具有挑战性和趣味性的研究方向&#xff0c;同时也是顶会顶刊的常客。但不得不说&#xff0c;今年关于遥感小目标检测的研究热情尤其高涨&#xff0c;已经出现了很多非常优秀的成果。 比如SuperYOLO方法&#xff0c;通过融合多模态数据并执行高分辨…

【重学 MySQL】二十八、SQL99语法新特性之自然连接和 using 连接

【重学 MySQL】二十八、SQL99语法新特性之自然连接和 using 连接 自然连接&#xff08;NATURAL JOIN&#xff09;USING连接总结 SQL99语法在SQL92的基础上引入了一些新特性&#xff0c;其中自然连接&#xff08;NATURAL JOIN&#xff09;和USING连接是较为显著的两个特性。 自…

数据结构(14)——哈希表(1)

欢迎来到博主的专栏&#xff1a;数据结构 博主ID&#xff1a;代码小豪 文章目录 哈希表的思想映射方法&#xff08;哈希函数&#xff09;除留余数法 哈希表insert闭散列负载因子扩容find和erase 哈希表的思想 在以往的线性表中&#xff0c;查找速度取决于线性表是否有序&#…

知识库管理系统在企业数字化转型中的作用

引言 在数字化转型的浪潮中&#xff0c;企业正以前所未有的速度重塑其业务模式、运营流程和组织架构&#xff0c;以适应快速变化的市场环境和客户需求。这一过程中&#xff0c;知识库管理系统作为信息整合与知识共享的核心平台&#xff0c;发挥着举足轻重的作用&#xff0c;不…

【解决】AnimationCurve 运行时丢失数据问题

开发平台&#xff1a;Unity 2022 编程平台&#xff1a;Visual Studio 编程语言&#xff1a;CSharp   一、问题背景 如上图所示的 GracityComponent 组件中&#xff0c;引用 AnimationCurve 作为可调属性。但在实际使用中出现数据丢失问题。大致为以下两种情况&#xff1a; 运…

【重学 MySQL】二十七、七种 join 连接

【重学 MySQL】二十七、七种 join 连接 union 的使用UNION 的基本用法示例UNION ALL 的用法 七种 join 连接代码实现语法格式小结 union 的使用 UNION 在 SQL 中用于合并两个或多个 SELECT 语句的结果集&#xff0c;并默认去除重复的行。如果希望包含重复行&#xff0c;可以使…

从状态管理到性能优化:全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compo…

RNN发展(RNN/LSTM/GRU/GNMT/transformer/RWKV)

RNN到GRU参考&#xff1a; https://blog.csdn.net/weixin_36378508/article/details/115101779 tRANSFORMERS参考&#xff1a; seq2seq到attention到transformer理解 GNMT 2016年9月 谷歌,基于神经网络的翻译系统&#xff08;GNMT&#xff09;&#xff0c;并宣称GNMT在多个主…

java程序员入行科目一之CRUD轻松入门教程(二)

封装工具类 封装获取连接&释放资源操作 在实际使用JDBC的时候&#xff0c;很多操作都是固定的&#xff0c;没有必要每次都去注册驱动&#xff0c;获取链接对象等等。 同样&#xff0c;释放资源的close操作也可以封装一下 下面是封装好的具体工具类 package com.jimihua.u…

SpringBoot项目用Aspose-Words将Word转换为PDF文件正常显示中文的正确姿势

简介 目前需要实现将Word转换为PDF的功能&#xff0c;但在实现过程中遇到了一个问题&#xff1a;生成的PDF文件中的中文变成了方框。 Maven依赖 <dependency><groupId>com.aspose</groupId><artifactId>aspose-words</artifactId><version…