Saya sedang membangunkan projek vue3.
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");
dan public/index.html saya
<!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>
Dan App.vue saya;
<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>
Objek kedai saya;
export default createStore({
state: {
message:'Hello'
}
});
dan .html kedua saya;
<!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>
Apabila saya membuka skrin kedua menggunakan kaedah OpenNewPage, saya tidak boleh mengakses objek kedai dan komponen yang ingin saya gunakan tidak berfungsi. Saya cuba;
Second.js
const app2 = createApp({
});
export { app2 };
dan kaedah saya
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");
}
}
}
Entah bagaimana saya cuba menjalankan dalam secondary.html tetapi mendapat amaran seperti "[Vue warn]: Tidak dapat memasang aplikasi: Memasang pemilih sasaran". Bagaimanapun, kod itu tidak berfungsi. Boleh kamu bantu saya?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
openNewPage()无法为新打开的页面运行脚本；只有新页面可以运行自己的脚本。当openNewPage()尝试app2.mount(), ia menjalankan kod pada halamannya sendiri (bukan halaman baharu), menyebabkan ralat yang anda perhatikan.Penyelesaian
Alih keluar kod pelekap dalam
openNewPage()supaya ia hanya membuka halaman baharu:export default { openNewPage() { window.open('second.html', …); } }KEMASKINI
second.html以加载挂载应用的脚本，并删除<div id="appSecond">中不必要的<template>:Dalam
second.js, tambah kod untuk memasang apl anda:// second.js import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#appSecond')