< iframe src="https://www.antdv.com/docs/ vue /introduce- infodata.ter_user_name : ""// 客户姓名。//通过.contentWindow.postMessage(data,"*")向 iframe 子组件传值。// 'dest': infodata.user_mobile, // 手机号+0。'dest': "13455955635", // 手机号+0。'stationId': '69999', // 写死。'loginId': '17999', // 坐席工号。//获取 iframe 元素。// 监听用户关闭对话框,执行签出操作。 最近工作中，项目上遇到一个这样的需求，就是在打开报表的打印预览界面时，去切换标签，切回打印预览界面的时候，要求界面不刷新。 vue 框架中，我们去处理此类问题，通常马上就会想到去使用 vue 框架中自带的keep-alive组件，所以一开始我也是去使用了keep-alive,但是发现没有达到预期效果，后面通过研究和查阅资料发现，在 vue 项目中加入了含有 iframe 的 页面 ，在路由切换的过程中，使用keep-alive是达不到数据 缓存 的效果的。 2、使用keep-alive 缓存 不了 iframe 界面原因 最近一个需求，需要在 Vue 项目中加入 含有 iframe 的 页面 ，同时在路由切换的过程中，要求 iframe 的内容 不会被刷新 。一开始使用了 Vue 自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue 的keep-alive原理 要实现对保持 iframe 页的状态。我们先搞清楚为什么 Vue 的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。 iframe 页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染 iframe 内的内容。 另外 在src\router\generator-routers.js添加。使用 iframe 导入其他 页面 的时候。会出现无法 缓存 的问题。在src\layouts\PageView. vue 替换内容。在src\store\modules\app.js 在。小诺框架 是 iframe 直接加载的，导致无法 缓存 。TODO: 是提示 要添加的内容在这里！需要 缓存 的 iframe 不进行删除处理。使用的小诺框架 vue 2 版本。在 vue x 中添加一个状态记录。 最近在研发过程中，遇到了一个优化， vue 项目 嵌套 在另外一个 vue 项目的 iframe 中，外层 vue 的 iframe 刷新， iframe 中的 vue 项目希望可以停留在你当前操作的 页面 ，而不是刷回到一开始的 iframe 里src路径 当开始听到这个优化点的时候，一上来有点懵，初步想法是存在localstroage里面，每次 页面 刷新的时候，去 缓存 里面取值，然后在push 但是这样操作有问题，localstro... 1、index 页面 主要代码 <keep-alive :include="keepAliveList"> <router-view class="a vue -view" v-if="keepAlive"/> </keep-alive> provide() { return { index: this, routerRefresh: this.routerRefresh data() { return