Vue-router: Change iframe src more than once , will not back to previous page

[RoamIn]

Version

3.0.1

Reproduction link

http://jsbin.com/hikorawipa/edit?html,output

Steps to reproduce

• Home to Iframe
• Click Bootstrap, loaded
• Click Vue, loaded
• Click Back button(go(-1)), will not back to Home, but the Bootstrap

What is expected?

Do not push iframe history into router

What is actually happening?

If change iframe src more than once (loaded), then go(-1) will not back to previous page

---

• find in v2.2.0, v3.0.1 too
• Chrome 62.0.3202.94

[posva]

It looks like iframes are creating entries in the history: https://stackoverflow.com/questions/14737365/modify-iframe-src-without-entry-to-history-object
so, it's normal that the back button goes back
You can get around this by using a key attribute on the iframe or changing your set method to replace the location:

set(src) {
  this.$refs.iframe.contentWindow.location.replace(src)
}

[RoamIn]

It works, thanks !

[mikermcneil]

One important thing to note, that might seem obvious, but is easy to miss: you'll need to make the key dynamic.

For example:

<iframe :src="jotformSrc" :key="'jotform-iframe-'+jotformSrc"></iframe>

i.e. we made the dynamic key contain the current src as a suffix

[RoamIn]

Oh, it works too!
It will force replacement of an element

[tlzzu]

这种对于富文本编辑器有什么解决办法吗？比如UE这种，初始化后会在页面上画出（没有src地址）一个iframe，此时路由切换回来时会刷新iframe，导致内容清空。。。

[aacassandra]

you can use v-bind:src or :src on iframe.