Vue 是一個受歡迎的前端框架，廣泛應用於 Web 開發。在使用 Vue 開發專案時，經常需要與視窗進行交互，例如開啟、關閉、傳遞資料等。本文將介紹如何在 Vue 中關閉目前視窗。
在傳統的 Web 開發中，關閉目前視窗最常用的方法是使用 window.close() 方法。在 Vue 中，我們可以直接在元件中使用這個方法來關閉目前視窗。
例如，我們可以在某個按鈕點擊事件中使用以下程式碼：
<button @click="closeCurrentWindow">关闭窗口</button>
...
methods: {
closeCurrentWindow() {
window.close();
},
}這裡透過在按鈕的點擊事件中呼叫closeCurrentWindow() 方法，再使用window.close() 來關閉目前視窗。
要注意的是，使用 window.close() 方法必須滿足以下條件：
除了使用 window.close() 方法，我們也可以使用 window.opener 屬性來關閉目前視窗。 window.opener 屬性指向開啟目前視窗的視窗對象，我們可以透過它來進行互動。
例如，我們可以在父視窗中定義一個 closeCurrentWindow() 方法，並將它傳遞給子視窗。子視窗中可以透過 window.opener 呼叫父視窗中的方法來關閉目前視窗。
父視窗：
<template>
<div>
<button @click="openNewWindow">打开新窗口</button>
</div>
</template>
<script>
export default {
methods: {
openNewWindow() {
window.open('newWindow.html', '_blank');
},
closeCurrentWindow() {
window.close();
}
}
}
</script>子視窗：
<template>
<div>
<button @click="closeWindow">关闭窗口</button>
</div>
</template>
<script>
export default {
methods: {
closeWindow() {
window.opener.closeCurrentWindow();
}
}
}
</script>在子視窗中，我們透過 window.opener 呼叫父視窗中的 closeCurrentWindow() 方法來關閉目前視窗。
要注意的是，使用 window.opener 屬性也有一些限制，例如在某些瀏覽器環境下可能會出現相容性問題。
在使用 Vue 開發單頁應用程式時，我們通常會使用 Vue Router 來管理路由。在 Vue Router 中，可以透過程式設計方式來實現關閉目前視窗的功能。
例如，在某個路由元件中，我們可以使用 $router.go() 方法來傳回上一個路由，也就是關閉目前視窗。程式碼如下：
<template>
<div>
<button @click="closeWindow">关闭窗口</button>
</div>
</template>
<script>
export default {
methods: {
closeWindow() {
this.$router.go(-1);
}
}
}
</script>要注意的是，在使用$router.go() 方法關閉視窗時，需要滿足以下條件：
以上是vue如何關閉目前視窗的詳細內容。更多資訊請關注PHP中文網其他相關文章！
