Vue中使用keep alive做缓存，组件中含多个iframe每次加载如何做到缓存问题

已于 2024-03-15 23:41:24 修改
阅读量5.3k 收藏
点赞数 1
分类专栏： javaScript 其他 文章标签： javascript
于 2020-08-31 09:30:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35876316/article/details/108314816
版权

问题场景：

1.一个公共组件包含多个iframe嵌套页面，希望是每次激活的iframe页面能做到缓存内容；

2.这个公共组件注册共享一个路由；

原先解决思路：使用keep-alive标签做缓存，结果公共组件是缓存了，但每次切换加载iframe页面都被刷新了。

最后借鉴了这位仁兄的解决思路（Vue中对iframe实现keep alive无刷新的方法_keep-alive 缓存对iframe不生效-CSDN博客），最终得以解决。

思路是：嵌套iframe的组件单独使用v-show控制显隐，条件还是路由path,其他正常的页面还是使用keep-alive标签包着！！

**之火
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
vue对iframe页面进行缓存，只有一个iframe，不同的src怎么做缓存
weixin_43558117的博客
04-28 2747
vue对iframe进行缓存，多个iframe共用一个实例如何解决
示例vue 的keep-alive缓存功能的实现
10-17
在 Vue 中，`<keep-alive>` 通常与 `Vue Router` 结合使用，用于在路由切换时保存组件的状态。 `<keep-alive>` 的基本使用是在需要缓存的动态组件外层包裹。例如，在 `app.vue` 文件中，你可以这样配置： ```html ...
Vue中对iframe实现keep alive无刷新的方法
01-19
前言 最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理 要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。 另外
【vue】iframe相关问题
Qxn530的博客
03-02 5664
iframe刷新、子页面关闭iframe所在弹窗、iframe进度条一直加载中、iframe传参、iframe页面中需要使用wordexport等功能、iframe在弹窗中、iframe展示PDF不显示
解决iframe缓存问题
最新发布
李十三的博客
07-15 380
背景：我的项目中有个特殊类型的表单的新建编辑预览操作 都需要使用iframe嵌入另一个项目的页面 于是会频繁的切换到iframe页面中去 但是打开 iframe发现还停留在上次关闭的界面 怎样让iframe都重新加载?
vue 项目中关于iframe页面缓存问题
weixin_45514326的博客
05-20 5404
1.简介 关于ifarem标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题，但是有需求这样的 要求外嵌页面的内容保持缓存 项目中一不小心点他其它页面 再次切换回来 防止页面外嵌页面再次刷新。 2关于使用keep-alive缓存不了iframe界面原因 很多人第一想法就是会使用 keep-alive 去实现组件缓存，但是对iframe标签是行不通的，keepalive作为缓存组件这里不过多介绍，大多用于项目中 标签的嵌套 实现出口视图页面的缓存。项目中可以发现keepalive包裹
VUE项目中iframe缓存
wdzl5的博客
05-11 719
以上为查阅资料后,自己实现的,因为走了点弯路,所以自己总结一下记录出来,以记录.
vue的keep-alive如何缓存iframe?
badbaby52906的博客
04-21 1356
vue-中的keep-alive能否缓存iframe
vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题
ll7425的博客
11-16 5822
vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题
解决Vue中使用keepAlive不缓存问题
10-15
在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于将组件的状态保留在内存中，以便在组件切换时避免重新渲染，从而提高性能。然而，在实际开发中，有时可能会遇到`keep-alive` 不起作用，即组件并未被正确缓存的...
Vue中对iframe实现keep alive
u012831062的专栏
01-14 3646
前言 最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理 要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了V...
vue下iframe标签页,切换标签页,iframe不重载
12-05
vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次$store。思路很关键，看懂了可复用，熟悉vue的朋友酌情下载。
vue页面嵌套iframe缓存
qq_33475629的博客
05-20 4067
iframe缓存
vue 内嵌iframe，＜keep-alive＞＜router-view/＞＜/keep-alive＞不能保存节点问题
qq_29194615的博客
04-27 2246
问题描述： 在路由跳转时，如果当前页面嵌套了iframe，iframe嵌套的页面每次都会重新加载一遍，这样体验肯定不好的。 问题原因： iframe标签存储在DOM中，而vue的缓存机制并不是直接存储 DOM 结构，导致vue中使用iframe无法对其进行缓存 解决方案： 利用隐藏和显示，不是真实的去切换。 修改的地方： ...
Vue3 对于内嵌Iframe组件进行缓存
qq_43225508的博客
07-06 1408
对于系统内所有内嵌iframe 的页面均通过同一个路由'/iframe', 在router.query内传入不同src 参数，在同一组件内显示iframe 内嵌页面，对这些页面分别进行缓存。3.4 在template 部分增加 组件通过v-show 控制ifram 路由缓存的组件是否渲染。// 保存相同iframe 组件修改之后的组件名称同iframe套壳组件的映射关系。3.3 对同一iframe 路由传入不同参数的组件套壳修改name 进行缓存。-- iframe 组件缓存 -->
vue中含有iframe的页面如何避免路由切换时keep-alive不起作用
weixin_47180815的博客
11-30 1696
vue中含有iframe的页面如何避免路由切换时keep-alive不起作用
vue iframe实现缓存
liuchuangqiang的博客
07-06 2801
实现iframe缓存 原理很简单，就是通过。实现的，但是iframe并不生效。vue原来的缓存 是通过。
vue中使用keep- alive缓存机制，切换标签含有iframe标签的界面会被重新刷新的问题处理
weixin_44490109的博客
12-01 9631
1、序言 最近工作中，项目上遇到一个这样的需求，就是在打开报表的打印预览界面时，去切换标签，切回打印预览界面的时候，要求界面不刷新。vue框架中，我们去处理此类问题，通常马上就会想到去使用vue框架中自带的keep-alive组件，所以一开始我也是去使用了keep-alive,但是发现没有达到预期效果，后面通过研究和查阅资料发现，在vue项目中加入了含有iframe的页面，在路由切换的过程中，使用keep-alive是达不到数据缓存的效果的。 2、使用keep-alive缓存不了iframe界面原因 （1）
vue中使用keep-alive缓存动态组件 为什页面滚动位置也一样
06-13
在 Vue 中使用 `keep-alive` 缓存动态组件时，同样会出现滚动位置相同的问题。这是因为使用 `keep-alive` 缓存动态组件时，缓存的是组件实例对象，也就是说，即使组件被缓存起来了，组件实例仍然存在，所以滚动位置也会被保留。 解决这个问题的方法和在普通组件中使用 `keep-alive` 缓存时类似，可以在需要缓存的动态组件中添加 `activated` 钩子函数，在组件被激活并重新渲染时恢复滚动位置。 示例代码如下： ```javascript export default { name: 'MyDynamicComponent', data() { return { scrollPosition: null // 保存滚动位置 } }, activated() { // 组件被激活并重新渲染时恢复滚动位置 if (this.scrollPosition !== null) { window.scrollTo(0, this.scrollPosition) } }, beforeRouteLeave(to, from, next) { // 离开当前路由时保存滚动位置 this.scrollPosition = window.scrollY || window.pageYOffset || document.documentElement.scrollTop next() } } ``` 通过这种方式，可以在使用 `keep-alive` 缓存动态组件时保留组件状态的同时，避免滚动位置的问题。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

**之火

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值