So schließen Sie das aktuelle Fenster in Vue

Vue ist ein beliebtes Front-End-Framework, das in der Webentwicklung weit verbreitet ist. Wenn Sie Vue zum Entwickeln von Projekten verwenden, müssen Sie häufig mit Fenstern interagieren, z. B. öffnen, schließen, Daten übertragen usw. In diesem Artikel erfahren Sie, wie Sie das aktuelle Fenster in Vue schließen.

1. Verwenden Sie window.close()

In der herkömmlichen Webentwicklung ist die häufigste Methode zum Schließen des aktuellen Fensters die Verwendung der Methode window.close(). In Vue können wir diese Methode direkt in der Komponente verwenden, um das aktuelle Fenster zu schließen.

Zum Beispiel können wir den folgenden Code in einem Schaltflächenklickereignis verwenden:

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

...

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

Hier rufen wir die Methode closeCurrentWindow() im Schaltflächenklickereignis auf und verwenden dann window.close(), um das aktuelle Fenster zu schließen.

Es ist zu beachten, dass bei Verwendung der Methode window.close() folgende Bedingungen erfüllt sein müssen:

• Das aktuelle Fenster muss per JavaScript geöffnet werden.
• Das aktuelle Fenster muss durch ein Skript gesteuert werden.
• Wenn das aktuelle Fenster ein Fenster der obersten Ebene ist (kein übergeordnetes Fenster hat), kann das Fenster nicht geschlossen werden.

2. Fenster.opener verwenden

Zusätzlich zur Verwendung der Methode window.close() können wir auch die Eigenschaft window.opener verwenden, um das aktuelle Fenster zu schließen. Die Eigenschaft window.opener verweist auf das Fensterobjekt, das das aktuelle Fenster öffnet, über das wir interagieren können.

Zum Beispiel können wir eine closeCurrentWindow()-Methode im übergeordneten Fenster definieren und an das untergeordnete Fenster übergeben. Das untergeordnete Fenster kann die Methode im übergeordneten Fenster über window.opener aufrufen, um das aktuelle Fenster zu schließen.

Übergeordnetes Fenster:

<template>
    <div>
        <button @click="openNewWindow">打开新窗口</button>
    </div>
</template>

<script>
export default {
    methods: {
        openNewWindow() {
            window.open('newWindow.html', '_blank');
        },
        closeCurrentWindow() {
            window.close();
        }
    }
}
</script>

Untergeordnetes Fenster:

<template>
    <div>
        <button @click="closeWindow">关闭窗口</button>
    </div>
</template>

<script>
export default {
    methods: {
        closeWindow() {
            window.opener.closeCurrentWindow();
        }
    }
}
</script>

Im untergeordneten Fenster rufen wir über window.opener die Methode closeCurrentWindow() im übergeordneten Fenster auf, um das aktuelle Fenster zu schließen.

Es ist zu beachten, dass es bei der Verwendung des window.opener-Attributs einige Einschränkungen gibt. Beispielsweise können in einigen Browserumgebungen Kompatibilitätsprobleme auftreten.

3. Vue Router verwenden

Wenn wir Vue zum Entwickeln von Single-Page-Anwendungen verwenden, verwenden wir normalerweise Vue Router, um das Routing zu verwalten. In Vue Router kann die Funktion zum Schließen des aktuellen Fensters programmgesteuert implementiert werden.

In einer Routing-Komponente können wir beispielsweise die Methode $router.go() verwenden, um die vorherige Route zurückzugeben, also das aktuelle Fenster zu schließen. Der Code lautet wie folgt:

<template>
    <div>
        <button @click="closeWindow">关闭窗口</button>
    </div>
</template>

<script>
export default {
    methods: {
        closeWindow() {
            this.$router.go(-1);
        }
    }
}
</script>

Es ist zu beachten, dass bei Verwendung der Methode $router.go() zum Schließen des Fensters die folgenden Bedingungen erfüllt sein müssen:

• Das aktuelle Fenster muss eine Route in einem einzigen sein -seitige Anwendung.
• Die aktuelle Route muss über einen vorherigen Verlaufseintrag verfügen, bevor Sie die Methode $router.go() verwenden können, um zur vorherigen Route zurückzukehren und das aktuelle Fenster zu schließen.

Zusammenfassung

In diesem Artikel werden drei Methoden zum Schließen des aktuellen Fensters in Vue vorgestellt:

1. Verwenden Sie die Methode window.close()
2. Verwenden Sie die Eigenschaft window.opener
3. Verwenden Sie den Vue Router, um die Route programmgesteuert zu schließen

Unter diesen ist die Methode window.close() die einfachste Methode, weist jedoch auch einige Einschränkungen auf. Sowohl die window.opener-Eigenschaft als auch der Vue Router können diese Einschränkungen besser bewältigen und bieten eine flexiblere Interaktionsmethode. Der Leser kann je nach Bedarf die für ihn am besten geeignete Methode zum Schließen des aktuellen Fensters wählen.

Das obige ist der detaillierte Inhalt vonSo schließen Sie das aktuelle Fenster in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!