Vueで現在のウィンドウを閉じる方法

Vue は、Web 開発で広く使用されている人気のフロントエンド フレームワークです。 Vue を使用してプロジェクトを開発する場合、多くの場合、ウィンドウを開く、閉じる、データを転送するなど、ウィンドウを操作する必要があります。この記事では、Vueで現在のウィンドウを閉じる方法を紹介します。

1. window.close() を使用する

従来の Web 開発では、現在のウィンドウを閉じる最も一般的な方法は window.close() メソッドを使用することです。 Vue では、このメソッドをコンポーネント内で直接使用して、現在のウィンドウを閉じることができます。

たとえば、ボタン クリック イベントで次のコードを使用できます:

<button @click="closeCurrentWindow">关闭窗口</button>

...

methods: {
    closeCurrentWindow() {
        window.close();
    },
}

ここでは、ボタン クリック イベントで closeCurrentWindow() メソッドを呼び出してから、window.close() を使用します。現在のウィンドウを閉じます。

window.close() メソッドを使用する場合は、次の条件を満たす必要があることに注意してください。

• 現在のウィンドウは JavaScript で開かれている必要があります。
• 現在のウィンドウはスクリプトによって制御される必要があります。
• 現在のウィンドウがトップレベル ウィンドウ (親ウィンドウがない) の場合、ウィンドウを閉じることはできません。

2. window.opener の使用

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 属性の使用にはいくつかの制限があることに注意してください。たとえば、一部のブラウザ環境では互換性の問題が発生する可能性があります。

3. Vue Router の使用

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() メソッドを使用してウィンドウを閉じる場合は、次の条件を満たす必要があることに注意してください。

• 現在のウィンドウは、ルートの単一ページ アプリケーションである必要があります。
• $router.go() メソッドを使用して前のルートを返し、現在のウィンドウを閉じるには、現在のルートに以前の履歴レコードが必要です。

#概要

この記事では、Vue で現在のウィンドウを閉じる 3 つの方法を紹介します。

window.close() メソッドを使用します
1. window.opener プロパティを使用する
2. Vue Router を使用してプログラムでルーティングを閉じる

その中で、window.close() メソッドは最も単純なメソッドですが、いくつかの制限もあります。 。 window.opener プロパティと Vue Router は両方とも、これらの制限をより適切に処理し、より柔軟な対話方法を提供できます。読者は、特定のニーズに応じて、現在のウィンドウを閉じるために最適な方法を選択できます。

以上がVueで現在のウィンドウを閉じる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。