Vue嵌套iframe时$router.go(-1)后退bug的原因解析

Vue嵌套iframe，$router.go(-1)后退bug

问题：

更改iframe中src值后导致的路由跳转混乱，多次更改iframe的src属性后，调用router.go(-1)，不能实现路由后退上一级

原因：

还是在于通过ifream.src赋值，因为域相同，还是会向window.history中插入一条历史记录

之前的代码

<iframe ref="iframe" :src="url" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
<script>
  export default {
    methods:{
      setIframeSrc(){
        this.url = '新url'
      }
    }
  }  
</script>

解决办法

去掉 :src="url" ，增加 this.$refs.iframe.contentWindow.location.replace

<iframe ref="iframe" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
<script>
  export default {
    methods:{
      setIframeSrc(){
      	this.url = '新url'
        this.$refs.iframe.contentWindow.location.replace(this.url)
      }
    }
  }  
</script>

参考资料：

嵌套iframe，$router.go(-1)后退bug

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

问题描述：

在使用vue-router跳转过来的页面中内嵌了一个iframe，通过选择不同项替换iframe的src，但是在使用this.$router.go(-1)返回之前的页面时发现页面刷新，点击多次才能返回之前的页面

原因：

浏览器机制的原因，在 iframe 导航变化后手动点击浏览器的后退按钮也依然只是后退 iframe 中的导航。类似window.history.go

解决方法：

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

<iframe ref="iframe"></iframe>
this.$refs.iframe.contentWindow.location.replace(src)

到此这篇关于Vue嵌套iframe，$router.go(-1)后退bug的文章就介绍到这了,更多相关vue嵌套iframe内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！