[vue] 嵌套iframe,$router.go(-1)后退bug

问题 :更改iframe中src值后导致的路由跳转混乱,多次更改iframe的src属性后,调用router.go(-1),不能实现路由后退上一级
原因:还是在于通过ifream.src赋值,因为域相同,还是会向window.history中插入一条历史记录

之前的代码

js 复制代码
<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

js 复制代码
<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

相关推荐
脸大是真的好~30 分钟前
黑马JAVAWeb -Vue工程化-API风格 - 组合式API
前端·javascript·vue.js
你挚爱的强哥42 分钟前
【sgMobileUploadTypeSelect】自定义组件:从底部弹出选择上传图片文件的方式【1、上传本地文件,2、拍摄上传】
前端·javascript·vue.js
LXA08091 小时前
Vue 3中使用JSX
前端·javascript·vue.js
执携1 小时前
Vue Router (历史模式)
前端·javascript·vue.js
G018_star sky♬1 小时前
使用npm运行js脚本覆盖vue依赖包
javascript·vue.js
宇余2 小时前
从 useState 到 URLState:前端状态管理的另一种思路
前端·vue.js
std860213 小时前
微软 Win11 经典版 Outlook 曝 BUG,加速 SSD 损耗
microsoft·bug·outlook
计算机学姐3 小时前
基于SpringBoot的健身房管理系统【智能推荐算法+可视化统计】
java·vue.js·spring boot·后端·mysql·spring·推荐算法
一 乐3 小时前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·数据库·vue.js·spring boot·生活
小蹦跶儿4 小时前
解决Webpack 打包报错:TypeError: Cannot assign to read only property 'exports' ?
javascript·vue.js·webpack