解决Vue keep-alive 对iframe 不生效问题 替代解决

最新推荐文章于 2025-06-05 12:13:27 发布
原创 最新推荐文章于 2025-06-05 12:13:27 发布 · 339 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

场景：多个iframe 标签切换，但是会重新刷新加载  使用keep-alive  不管用

解决方法：本项目前端使用element-plus 框架 不使用 keep-alive   直接使用 elementplus   Tabs el-tabs  也能实现此效果 且 缓存了iframe 状态不会重新加载。

效果：

     

渐-近-线
关注
keep-alive缓存不了iframe
良_123的专栏
09-13 1527
看起来并没有什么问题，并且其他非 iframe 实现的页面都是可以被缓存的，因此可以推断问题出在 iframe 的实现上。我们先了解下 KeepAlive。
vue3使用 keep-alive对iframe进行缓存
qq_34665877的博客
02-22 5003
1.定义基础组件和路由. // 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: ` <q-text data-data='{"data":{},"options":""}'></q-text> <input type="text" /> <iframe src="https://www.antdv.com/docs/vue/introduce-
Vue中对iframe实现keep alive无刷新的方法
10-16
主要介绍了Vue中对iframe实现keep alive无刷新的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
为了让 iframe 支持 keepAlive，我连夜写了个 kframe
最新发布
程序员成长指北
06-05 97
Iframe 组件是对 iframe 操作流的封装，方便在 vue 项目中使用，内部涉及 iframe 创建、插入、设置样式、移除等操作，为方便操作，将其封装为 Iframe 类；iframe 无法保存于 VNode 中，又不能将 iframe 从文档中移动或移除，那么就想办法在某个地方把 iframe 存起来，比如 body 节点下，然后通过样式控制 iframe 展示与隐藏，顺着思路捋一下整体流程。是正常的，异常的是内嵌于页面的 iframe 内容区，页面每次。切换标签后内容区自动刷新，操作进度丢失？
简单解决iframe无法被keepalive缓存，导致切换页面时会不停的重新加载iframe页面
weixin_72436508的博客
11-15 2246
接手别人的项目，然后遇到了一个问题，公司的后台项目之前有一个版本是用php写的，有几百个菜单页面，然后重构成新的版本页面需要时间，但是新老版本又需要交替使用，所以新项目里面的老项目页面是通过iframe加载的 但是呢遇到一个问题就是每次切换tab和左边菜单的时候，iframe都会重新加载，哪怕写了keepalive也没用，页面不会被缓存，后面读了一下router，也大概知道keepalive的原理，原理也不复杂，简单点说就是，iframe加载的页面属于是网络资源，keepalive并不会缓存iframe的
Vue中对iframe实现keep alive（无刷新）
00年女程序员分享自己的学习笔记
02-10 2067
/ 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。然后，再改Home.vue,在此文件中之前就是使用keep-alive写的，在下面加个ifame的。// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。// 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页。// 遍历路由的所有页面，把含有iframeComponent标识的收集起来。//-----iframe页面-------
Vue中对iframe实现keep alive
u012831062的专栏
01-14 3820
前言 最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理 要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了V...
iframe页面向vue父页面传值，vue页面向iframe页面传值
qq_34799366的博客
04-16 2385
1.iframe页面向vue父页面传值 vue代码 <template> <div> <iframe id="iframe"></iframe> </div> </template> <script> export default { data(){ return { iframeDa...
解决Vue中使用keepAlive不缓存问题
10-15
然而，在实际开发中，有时可能会遇到`keep-alive` 不起作用，即组件并未被正确缓存的问题。本文将深入探讨这个问题，并提供解决方案。 首先，确保在`app.vue` 文件中正确地包裹了需要缓存的`router-view`。`keep-...
vue 多页面iframe不刷新_Vue中对iframe实现keep alive（无刷新）
weixin_36298476的博客
12-29 1695
前言最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。Vue的keep-alive原理要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了VNod...
vue3.0(十四)内置组件KeepAlive
chengcheng9876的博客
06-20 7257
vue3.0(十四)内置组件KeepAlive
vue的keep-alive如何缓存iframe?
badbaby52906的博客
04-21 1846
vue-中的keep-alive能否缓存iframe
vue3 中 iframe 多页面切换导致资源刷新的问题解决
weixin_54851039的博客
04-19 740
最近发现一个问题，我在使用 websocket 的时候，在主页面进行了 websocket 连接了之后，再使用 iframe 打开子页面的时候，通常会触发页面刷新，这样就导致 WebSocket 断开，这是因为切换 src 会重新加载 iframe 内容，使得页面环境重置，进而导致 WebSocket 连接丢失。
vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题
ll7425的博客
11-16 6470
vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题
iframe实现缓存
qq_43670721的博客
09-29 1472
iframe缓存
Vue iframe嵌套的页面实现路由缓存 实现keep-alive效果
Jokerxiuka的博客
12-11 900
【代码】Vue iframe嵌套的页面实现路由缓存 实现keep-alive效果。
keep-alive没用
09-01
引用提到了使用Vue自带的keep-alive发现没有用，并自己研究了一下解决方案。引用提到了一些可能导致keep-alive无效的原因，如组件中的name属性和路由中的name属性字段不一致、路由的meta属性中未设置KeepAlive属性或者KeepAlive属性的值为false等。引用描述了使用keep-alive结合路由时的问题，例如需要缓存的组件在路由配置的meta中添加keep-alive属性，但列表页点击进入详情页后再返回列表页，列表页的缓存失效。 因此，如果keep-alive没有起作用，我们可以检查以下几个方面: 1. 确认组件中的name属性和路由中的name属性字段是否一致，如果不一致会导致keep-alive无效。 2. 确认路由的meta属性中是否设置了KeepAlive属性，以及该属性的值是否为true。如果未设置或者设置为false，keep-alive也会失效。 3. 对于三级及三级以上的路由，<Keep-Alive>可能不会起作用，缓存会失效。可以尝试在二级路由上重新包裹<router-view>来解决缓存问题。 4. 可以考虑使用其他博主分享的路由扁平化处理的方法，也可能解决keep-alive的问题。 综上所述，如果keep-alive没有起作用，可以检查组件和路由的name属性是否一致，以及路由的meta中是否设置了KeepAlive属性。同时，对于三级及三级以上的路由，可以尝试重新包裹<router-view>来解决缓存失效的问题。还可以参考其他博主分享的路由扁平化处理方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue中对iframe实现keep alive无刷新的方法](https://download.csdn.net/download/weixin_38553478/14822462)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [keep-alive 缓存页面不生效的三种原因](https://blog.csdn.net/weixin_49336005/article/details/126745266)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [keep-alive失效原因及解决方案](https://blog.csdn.net/yougejing/article/details/112427353)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值