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>参考资料：
扩展：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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
详解vue-router 2.0 常用基础知识点之router.push()
本篇文章主要介绍了vue-router 2.0 常用基础知识点之router.push()，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了vue实现列表拖拽排序的功能，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-11-11
这篇文章主要为大家详细介绍了Vue实现简易跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了uniapp vue与nvue轮播图轮播图组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了vue在body和query中如何向后端传参，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了整理项目中vue.config.js打包优化,包括配置 webpack-bundle-analyzer 插件查看文件大小及配置compression-webpack-plugin 用gzip压缩打包的文件大小，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue中的keep-alive实例代码，vue实现组件信息缓存的方法，在文中也给大家提到,需要的朋友可以参考下2018-07-07
项目中我们可能会碰到导出Excel文件的需求，这篇文章主要介绍了vue中导出Excel表格的实现代码，非常具有实用价值，需要的朋友可以参考下2018-10-10
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
这篇文章主要介绍了vue项目中企业微信使用js-sdk时config和agentConfig配置,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
浅谈Vue3.0新版API之composition-api入坑指南
这篇文章主要介绍了Vue3.0新版API之composition-api入坑指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论