动态修改同源iframe的src会向window.history插入记录，导致vue router后退异常；解决核心是避免浏览器将其视为导航，推荐用key强制重建iframe或同源时调用contentwindow.location.replace。
动态改 iframe.src 会往浏览器 history 堆栈里塞记录，这不是 Vue 或 React 的锅，是浏览器原生行为。想避免，核心就一条：别让浏览器把它当“导航”。
为什么 src 赋值会增加 history 记录
同源 iframe（比如主站 https://a.com 加载 https://a.com/report/1）每次改 src，浏览器就认为这是页面内一次“跳转”，自动调用 history.pushState() 级别的逻辑。Vue Router 的 history 栈和浏览器原生的 window.history 叠在一起，后退时就会先退 iframe 地址，而不是退到上一个 Vue 页面。
跨域 iframe（如 https://a.com 加载 https://b.com/page）通常不会触发该行为——但也不能完全依赖，Firefox 和 IE 表现不一致。
- 同源 + 静态声明的
<iframe></iframe>：必记 history - 同源 + 动态
document.createElement('iframe')创建：多数现代浏览器不记（Firefox 除外） - 跨域 iframe：一般不记，但子页面若自己调用
history.pushState，仍可能污染
用 location.replace 替换 iframe 内容（仅限同源）
如果 iframe 和父页同源，可以直接操作其 contentWindow.location.replace，它不会新增 history 条目，只替换当前项。
注意：必须确保 iframe 已加载完成，否则 contentWindow 为 null 或抛错。
- 在 Vue 中，用
v-if或ref+mounted/nextTick确保 DOM 就绪 - 不要用
this.$refs.iframe.contentWindow.location.href = url—— 这仍会 push - 正确写法：
this.$refs.iframe.contentWindow.location.replace(url) - 需处理
Same-Origin Policy报错：加try/catch，失败则降级为 src 赋值
用 key 强制重建 iframe（通用、推荐）
这是最稳定、跨框架（Vue/React）、跨源都有效的方案。原理是让框架销毁旧 iframe 并新建一个，浏览器自然不会复用历史记录。
关键不是“改 src”，而是“换人”——每次 URL 变，就给 <iframe></iframe> 换个 key，强制重新挂载。
- Vue 示例：
<iframe :src="currentUrl" :key="iframeKey"></iframe>，切换时执行this.iframeKey = Date.now()或Math.random() - React 同理：
key={url}或key={Date.now()} - 优势：不依赖同源，不触发跨域报错，无竞态风险
- 代价：iframe 重载有短暂白屏，但比路由错乱体验好得多
URL 加时间戳参数（解决缓存，顺带干扰 history）
单纯加参数（如 ?t=1724628240000）主要目的是绕过浏览器缓存，但它对 history 的影响是间接的：某些浏览器（尤其旧版 IE）把带不同 query 的同路径视为不同条目，反而加剧 history 泛滥。所以它不能替代前两种方案，只能作为辅助。
真正起效的是组合使用：用 key 重建 iframe + URL 加参，既防缓存又清历史。
- 别只加
?v=1这种固定值，得每次不同，如?t=${Date.now()} - 服务端若返回
Cache-Control: no-cache，可省略此步 - 注意：URL 参数过长可能触发 IE 的地址栏截断（虽已少见）
最容易被忽略的一点：你以为在修 iframe，其实是在和浏览器的 window.history 打交道。只要没彻底切断 iframe 导航与 history 的绑定（比如用 replace 或重建），任何“悄悄改 src”的尝试，都可能在用户猛点后退时突然爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
