[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

相关推荐
北漂Zachary1 小时前
四大编程语言终极对决:汇编/C#/Go/Java谁更强
汇编·golang·c#
Stark-C1 小时前
NAS音乐必备神器,全平台音乐收割机!极空间部署『Go Music DL』
开发语言·后端·golang
只会写Bug1 小时前
后台管理项目中关于新增、编辑弹框使用的另一种展示形式
前端·vue.js
M ? A2 小时前
Vue v-bind 转 React:VuReact 怎么处理?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
军军君012 小时前
数字孪生监控大屏实战模板:政务服务大数据
前端·javascript·vue.js·typescript·前端框架·echarts·less
忆往wu前3 小时前
前端请求三部曲:Ajax / Fetch / Axios 演进与 Vue 工程化封装
前端·vue.js
.Cnn3 小时前
Ajax与Vue 生命周期核心笔记
前端·javascript·vue.js·笔记·ajax
吴声子夜歌4 小时前
Vue3——渲染函数
前端·vue.js·vue·es6
Ruihong4 小时前
你的 Vue KeepAlive 组件,VuReact 会编译成什么样的 React 代码?
vue.js·react.js·面试
Ruihong4 小时前
你的 Vue slot 插槽,VuReact 会编译成什么样的 React 代码?
vue.js·react.js·面试