[Vuejs]-How to start an application dynamically with second.html in Vue3?

by

0👍

openNewPage() can’t run a script for the newly opened page; only the new page could run its own scripts. When openNewPage() tries app2.mount(), it’s running that code on its own page (not the new one), leading to the error you observed.

Solution

Remove the mounting code from openNewPage() so that it only opens the new page:

export default {
  openNewPage() {
    window.open('second.html', …);
  }
}

Update second.html to load the script that mounts the app, and remove the unnecessary <template> within the <div id="appSecond">:

<body>
  <div id="appSecond" style="height:100%">
    <span>{{message}}</span>
  </div>
  <script src="./second.js"></script>
</body>

In second.js, add the code that mounts your app:

// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#appSecond')

Leave a comment