ホームページ > 記事 > ウェブフロントエンド > Vueで現在のウィンドウを閉じる方法
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 中国語 Web サイトの他の関連記事を参照してください。