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 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
Vapor Mode是Vue 3.6推出的一个新的高效渲染模式,它实现了无虚拟DOM并大幅度提升性能, 下面就来详细的介绍一下使用Vapor Mode的方法小结,感兴趣的可以了解一下2026-05-05
这篇文章主要为大家详细介绍了Vue如何利用transition标签实现页面跳转动画，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起一下2023-08-08
动态表单是一个常见的需求,本文详细介绍了Vue.js中实现动态表单的创建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-12-12
这篇文章主要介绍了Vue入门之animate过渡动画效果的相关资料,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Vue的编码技巧与规范使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
路由守卫（Route Guards）是 Vue Router 的一个功能,它允许我们在路由发生之前执行逻辑判断,这篇文章主要为大家介绍了Vue中路由守卫的具体应用,需要的可以了解下2024-03-03
这篇文章主要为大家详细介绍了vue实现商城购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了vue穿梭框实现上下移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
Vue Router之router.push和router.resolve页面跳转方式
这篇文章主要介绍了Vue Router之router.push和router.resolve页面跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
最新评论