iframe切换路径导致页面回退失败

今天遇到一个bug

页面中嵌入一个iframe,通过顶部tab切换来更改iframe的src路径值,切换看起来很正常。

当我点击右上角返回时,页面却没有返回到上一个页面,而是iframe在局部回退,也就是说点击返回的时候,iframe的src变成了上一次赋值给他的src,而页面却没有回退。

什么原因呢?

原来iframe的src变更时,会往window.history中存入一条历史记录,我们切换iframe的src以后再去回退页面时会回退到那个被误存入的历史记录。

那该怎么解决呢?

很简单,我们只需要在切换src的时候把iframe给销毁再重新创建就行了。这样就是一个新的iframe,不会触发他的变更操作,也就不会往window.history中存入记录。

最简单的方式是:

给iframe加一个key属性,vue中的实现方式是