Comment fermer la fenêtre actuelle dans vue

Vue est un framework front-end populaire largement utilisé dans le développement Web. Lorsque vous utilisez Vue pour développer des projets, vous devez souvent interagir avec des fenêtres, comme l'ouverture, la fermeture, le transfert de données, etc. Cet article explique comment fermer la fenêtre actuelle dans Vue.

1. Utilisez window.close()

Dans le développement Web traditionnel, le moyen le plus courant de fermer la fenêtre actuelle est d'utiliser la méthode window.close(). Dans Vue, on peut utiliser cette méthode directement dans le composant pour fermer la fenêtre actuelle.

Par exemple, nous pouvons utiliser le code suivant dans un événement de clic sur un bouton :

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

...

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

Ici, nous appelons la méthode closeCurrentWindow() dans l'événement de clic sur un bouton, puis utilisons window.close() pour fermer la fenêtre actuelle.

Il est à noter que les conditions suivantes doivent être remplies lors de l'utilisation de la méthode window.close() :

• La fenêtre actuelle doit être ouverte par JavaScript.
• La fenêtre actuelle doit être contrôlée par un script.
• Si la fenêtre actuelle est une fenêtre de niveau supérieur (n'a pas de fenêtre parent), la fenêtre ne peut pas être fermée.

2. Utilisation de window.opener

En plus d'utiliser la méthode window.close(), nous pouvons également utiliser la propriété window.opener pour fermer la fenêtre actuelle. La propriété window.opener pointe vers l'objet window qui ouvre la fenêtre actuelle, à travers lequel nous pouvons interagir.

Par exemple, nous pouvons définir une méthode closeCurrentWindow() dans la fenêtre parent et la transmettre à la fenêtre enfant. La fenêtre enfant peut appeler la méthode dans la fenêtre parent via window.opener pour fermer la fenêtre actuelle.

Fenêtre parent :

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

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

Fenêtre enfant :

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

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

Dans la fenêtre enfant, nous appelons la méthode closeCurrentWindow() dans la fenêtre parent via window.opener pour fermer la fenêtre actuelle.

Il convient de noter qu'il existe certaines limitations dans l'utilisation de l'attribut window.opener. Par exemple, des problèmes de compatibilité peuvent survenir dans certains environnements de navigateur.

3. Utiliser Vue Router

Lorsque nous utilisons Vue pour développer des applications monopage, nous utilisons généralement Vue Router pour gérer le routage. Dans Vue Router, la fonction de fermeture de la fenêtre actuelle peut être implémentée par programme.

Par exemple, dans un composant de routage, nous pouvons utiliser la méthode $router.go() pour renvoyer l'itinéraire précédent, c'est-à-dire fermer la fenêtre actuelle. Le code est le suivant :

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

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

Il est à noter que lors de l'utilisation de la méthode $router.go() pour fermer la fenêtre, les conditions suivantes doivent être remplies :

• La fenêtre actuelle doit être une route dans un seul application d'une page.
• L'itinéraire actuel doit avoir un historique antérieur avant que vous puissiez utiliser la méthode $router.go() pour renvoyer l'itinéraire précédent et fermer la fenêtre actuelle.

Résumé

Cet article présente trois méthodes pour fermer la fenêtre actuelle dans Vue :

1. Utilisez la méthode window.close()
2. Utilisez la propriété window.opener
3. Utilisez Vue Router pour fermer la route par programme

Parmi elles, la méthode window.close() est la méthode la plus simple, mais elle présente également certaines limites. La propriété window.opener et Vue Router peuvent mieux gérer ces limitations et fournir une méthode d'interaction plus flexible. Les lecteurs peuvent choisir la méthode qui leur convient le mieux pour fermer la fenêtre actuelle en fonction de leurs besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!