vue-router 内嵌 iframe，导致this.$router.go(-1)返回上一页异常

问题描述

业务需求，需要内嵌 iframe 远程控制连接虚拟机，点击父页面刷新按钮，会重新发起连接请求，替换 iframe 的 src 。变更两次后，发现点击父页面的返回按钮调用 go(-1) 回退异常，变成 iframe 刷新回退，需要点击三次（与刷新按钮次数多一次）后才能正常返回之前的页面。

关键

• 更改 iframe 的src，并且加载完成。

结果

• go(-1) 会先回退 iframe 的内容

解决方法

iframe 里面的链接用 location.replace 跳转，这样就只会有一个历史记录了。

<iframe ref="iframe"></iframe>

this.$refs.iframe.contentWindow.loaction.replace(src)

原因

动态切换 iframe 的 src 会导致增加一条 iframe 的历史浏览记录， vue 是基于 window.history 做路由跳转，所以回退一步就是回退 iframe 的历史浏览记录。