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

更新时间：2023年09月21日 10:57:39 作者：533_

这篇文章主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Flutter部件内部状态管理小结之实现Vue的v-model功能
本文是 Flutter 部件内部状态管理的小结，从部件的基础开始，到部件的状态管理，并且在过程中实现一个类似 Vue 的 v-model 的功能，感兴趣的朋友跟随小编一起看看吧
2019-06-06
Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)
这篇文章主要介绍了Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）,本次记录一次使用Nuxt3搭建前端项目的过程，内容包含Nuxt3的安装，基于Vite脚手架（默认）构建的vue3项目，element-plus的安装配置，scss的安装，目录结构的创建和解释，需要的朋友可以参考下
2022-12-12
vue 实现LED数字时钟效果（开箱即用）
这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧
2019-12-12
解决Vue中使用keepAlive不缓存问题
这篇文章主要介绍了Vue中使用keepAlive不缓存问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
vue3原始值响应方案及响应丢失问题解读
这篇文章主要介绍了vue3原始值响应方案及响应丢失问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue实现一个矩形标记区域(rectangle marker)的方法
这篇文章主要介绍了vue实现一个矩形标记区域 rectangle marker的方法，帮助大家实现区域标记功能，感兴趣的朋友可以了解下
2020-10-10
Vue项目设置可以局域网访问
这篇文章主要介绍了Vue项目设置可以局域网访问，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue中实现拖拽排序功能的详细教程
在业务中列表拖拽排序是比较常见的需求,下面这篇文章主要给大家介绍了关于vue中实现拖拽排序功能的详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue 每次渲染完页面后div的滚动条保持在最底部的方法
下面小编就为大家分享一篇vue 每次渲染完页面后div的滚动条保持在最底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
详解Jest结合Vue-test-utils使用的初步实践
这篇文章主要介绍了详解Jest结合Vue-test-utils使用的初步实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06