Vue中如何让iframe实现keep alive且无刷新的持久化？

本文共计1387个文字，预计阅读时间需要6分钟。

前言：最近一个需求，需要在Vue项目中添加包含iframe的页面，同时在路由切换过程中，要求iframe的内容不会被刷新。

具体要求：

1.在Vue项目中实现iframe的嵌入。

2.在路由切换时，确保iframe的内容保持不变。

前言

最近一个需求，需要在Vue 项目中加入含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。

Vue的keep-alive原理

要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。另外 ，我也尝试有过想法：如果把整个iframe节点保存起来，然后需要切换时把它渲染到目标节点上，能否实现iframe页不被刷新呢？————也是不可行的，iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。