vue 多页面iframe不刷新_Vue中iframe保持活动状态（不刷新）

最新推荐文章于 2024-08-02 17:53:28 发布

weixin_39897887

最新推荐文章于 2024-08-02 17:53:28 发布

阅读量2.3k

点赞数

文章标签： vue 多页面iframe不刷新

本文链接：https://blog.csdn.net/weixin_39897887/article/details/111522544

版权

本文介绍了在Vue项目中，如何处理多页面且包含iframe的情况，避免iframe页面在路由切换时被刷新。通过在`router-view`上利用Vue路由和`v-show`切换，保持iframe的状态。详细讲述了在`router/index.js`中的配置，以及如何在组件中监听和处理路由变化，确保iframe页面不被重新加载。

摘要由CSDN通过智能技术生成

前言：

提起vue的缓存，大家第一时间想到的一定是keep-alive，但是了解keep-alive缓存原理的都知道是将节点信息保留在VNode中的组件中(在内存中)，并在需要渲染时从VNode渲染到真实DOM。iframe页面中的内容不属于该节点的信息，因此使用keep-alive仍会重新呈现iframe中的内容。但公司很多的项目涉及报表，报表都是以iframe的形式渲染的。

解决思路：

既然keep-alive只对节点信息有缓存，可以考虑在Vue的route-view节点上做点什么吗？切换非iframe页面时，它利用Vue路由；切换iframe页面时，它利用v-show切换显示和隐藏，这样就不会删除iframe节点，从而可以保持iframe状态。

做法：

router下的index.js

引入iframe页面

路由配置

在router-view页面

v-for="item in hasOpenComponentsArr"

:key="item.name"

:is="item.name"

v-show="$route.path === item.path"

import Header from '@/views/homePage/homePage_Hea