I am developing a vue3 project.
main.js;
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...
//just try...
app.mount("#app");
and my public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And my App.vue;
<template>
<button @click=openNewPage()>create new page</button>
<span>{{message}}</span>
<router-view />
</template>
<script>
methods:{
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
}
</script>
My store object;
export default createStore({
state: {
message:'Hello'
}
});
and my second .html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
</head>
<body>
<div id="appSecond" style="height:100%">
<template>
<span>{{message}}</span>
</template>
</div>
</body>
</html>
When I open the second screen using the OpenNewPage method, I cannot access the store object and the component I want to use does not work. I am trying;
Second.js
const app2 = createApp({
});
export { app2 };
And my method
import { app2 } from "../second.js";
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
if (t) {
t.onload = function () {
t.window.app = app2;
app2.mount("#appSecond");
}
}
}
Somehow I tried running in secondary.html but got a warning like "[Vue warn]: Unable to install application: Installing target selector". Anyway, the code doesn't work. Can you help me?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
openNewPage()Cannot run scripts for newly opened pages; only new pages can run their own scripts. WhenopenNewPage()attemptsapp2.mount(), it runs that code on its own page (instead of the new page), causing the error you observed.solution
Remove the mounting code in
openNewPage()so that it only opens a new page:export default { openNewPage() { window.open('second.html', …); } }Update
second.htmlto load the script for mounting the application, and remove unnecessary<template> in<div id="appSecond">In
second.js, add the code that installs your application:// second.js import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#appSecond')