Error with push/replace State DOMException in iframe with data:text/html

[steffanhalvorsen]

Version

4.0.0-beta.12

Reproduction link

https://jsfiddle.net/9tvd4hw6/ (simple example - not working using vue & vue-router next)
https://jsfiddle.net/z9qsbrLh/2/ (advanced - not working using vue & vue-router next)
https://jsfiddle.net/yor1f3q0/1/ (working example using vue next without vue-router next)
https://jsfiddle.net/o5zL7sm4/ (working example using vue 2 & vue router 3)

Steps to reproduce

• Create a simple vue app inside a variable as a string with minimal VueRouter setup using CDN
• Ex. var myVueNextCodeWithRouter = <script src="unpkg.com/..."/><div id="app#>...</div><router-link to=".../>...<script/>...
• Store code in a variable using: var codeForIframe = 'data:text/html' + myVueNextCodeWithRouter;
• Append code as src to an iframe

<iframe id="hey"></iframe>
<script>
let code = 'data:text/html,' + encodeURIComponent(`
<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></` + `script>
<script src="https://unpkg.com/vue-router@4.0.0-beta.12/dist/vue-router.global.js"></` + `script>
<div id="app">
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</div>
<script>
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

const app = Vue.createApp({})
app.use(router)

app.mount('#app')
</` + `script>
`);
let iframe = document.getElementById('hey')
iframe.src = code
</script>

What is expected?

It should run the app in iframe with routing

What is actually happening?

It throws a warning, destroys the render process and displays the source code instead.

---

The app works fine in iframe using vue next without next VueRouter: https://jsfiddle.net/yor1f3q0/1/
It does also work with VueRouter v3 for both History and Hash mode: https://jsfiddle.net/o5zL7sm4/
This render method is used to isolate a Vue App in an iframe with source code reactivity for working with Vue Components with Visual editing of Vue components.

[posva]

Thank you!