Vue détermine s'il faut fermer la page

Vue est un framework JavaScript populaire pour créer des interfaces utilisateur modernes et interactives. En développement commercial, nous devons souvent déterminer si l’utilisateur a fermé la page et la gérer en conséquence. Cet article expliquera comment utiliser Vue pour implémenter la fonction permettant de déterminer s'il faut fermer la page.

1. L'événement beforeunload dans Vue

L'événement beforeunload est déclenché avant que la page ne soit sur le point d'être déchargée, généralement lorsque la page Web est fermée ou actualisée. Nous pouvons effectuer des opérations associées en écoutant cet événement.

Dans Vue, nous pouvons utiliser window.addEventListener() dans le composant pour ajouter un écouteur d'événement beforeunload. Comme indiqué ci-dessous :

mounted() {
  window.addEventListener('beforeunload', e => {
    // 在此处添加相关代码
  })
}

Dans l'événement beforeunload, nous pouvons effectuer certains traitements qui doivent être effectués immédiatement, comme l'envoi de certaines requêtes au serveur, la sauvegarde des données, etc. Il convient de noter que puisque l'événement beforeunload sera appelé plusieurs fois pendant le processus de fermeture de la fenêtre, nous devons éviter d'effectuer la même opération plusieurs fois.

2. Utilisez Vue Router pour juger les sauts de page

En plus de l'événement beforeunload, nous pouvons également utiliser Vue Router pour juger les sauts de page. Vue Router est le plug-in officiel de gestion de routage de Vue, qui peut nous aider à implémenter SPA (Single Page Application).

Vue Router fournit un mécanisme global de protection de la navigation qui peut effectuer des opérations associées lors du changement d'itinéraire. Il s'agit notamment de beforeRouteLeave, qui est déclenché avant de quitter l'itinéraire actuel.

Dans Vue Router, nous pouvons ajouter le garde de navigation beforeRouteLeave via la méthode router.beforeRouteLeave(). Comme indiqué ci-dessous :

beforeRouteLeave(to, from, next) {
  // 在此处添加相关代码
}

Parmi eux, il y a des objets de routage vers et depuis qui représentent l'itinéraire à parcourir et l'itinéraire actuel, et ensuite se trouve une méthode utilisée pour contrôler les sauts d'itinéraire. Dans beforeRouteLeave, nous pouvons effectuer certains traitements qui doivent être effectués immédiatement, comme l'envoi de certaines requêtes au serveur, la sauvegarde des données, etc. Il est à noter que dans beforeRouteLeave, il faut appeler la méthode suivante pour implémenter le saut de route.

3. Améliorer la mise en œuvre de l'expérience utilisateur

En plus des deux méthodes présentées ci-dessus, nous pouvons également utiliser certaines techniques pour améliorer l'expérience utilisateur. Par exemple, lorsque la page est fermée ou actualisée, une boîte de dialogue apparaît pour que l'utilisateur confirme. Ici, nous pouvons utiliser l'événement window.onbeforeunload et le combiner avec l'instruction v-on de Vue pour y parvenir.

<template>
  <div>
    <button v-on:click="leavePage">离开页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    leavePage() {
      window.onbeforeunload = () => {
        return "确定离开本页面吗？"
      }
      window.location.href = "https://www.example.com"
    }
  }
}
</script>

Dans le code ci-dessus, nous avons ajouté une méthode pour quitter la page dans l'événement de clic sur le bouton, et en même temps, dans la méthode, une invite a été renvoyée via l'écouteur d'événement window.onbeforeunload pour permettre à l'utilisateur de confirmer s'il doit quitter cette page.

Résumé

Cet article présente plusieurs méthodes pour déterminer si la page est fermée dans Vue, notamment l'utilisation de l'événement beforeunload, l'utilisation de la garde de navigation beforeRouteLeave de Vue Router et la mise en œuvre de l'amélioration de l'expérience utilisateur. Dans le développement des affaires, nous pouvons choisir la méthode appropriée en fonction des besoins spécifiques pour réaliser le jugement de fermeture de page. Dans le même temps, il convient de noter que lors de l'exécution de certaines opérations qui doivent être effectuées immédiatement, nous devons éviter d'effectuer la même opération plusieurs fois pour éviter la perte de données ou d'autres problèmes.

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!