Lorsque le navigateur vue est fermé, il vous demande s'il faut le fermer

Alors que les applications monopage deviennent de plus en plus populaires, Vue, en tant que framework front-end grand public, a été largement utilisé. Cependant, il est plus difficile d'implémenter des invites lorsque le navigateur est fermé dans l'application.

Normalement, lorsque le navigateur est fermé, les utilisateurs sont susceptibles d'utiliser par erreur ou de fermer tous les onglets du navigateur. À l'heure actuelle, si nous avons des données non enregistrées ou d'autres données qui doivent être nettoyées dans l'application, cela entraînera des problèmes.

Afin de résoudre ce problème, nous devons ajouter une couche d'invite à l'application Vue. Lorsque l'utilisateur essaie de fermer l'onglet du navigateur, il recevra une invite lui demandant s'il est sûr de le fermer. .

Vue fournit l'événement de fermeture du navigateur avant le déchargement, qui est déclenché lorsque le navigateur est fermé ou que la page est actualisée. Nous pouvons écouter l'événement beforeunload de la page dans la fonction de cycle de vie de Vue :

created() {
  window.addEventListener('beforeunload', this.handleBeforeunload)
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeunload)
},
methods: {
  handleBeforeunload(event) {
    event.returnValue = '您确定要关闭该页面吗？'
  }
}

Dans le code ci-dessus, nous ajoutons l'écoute d'événement dans la fonction créée. Lorsque le navigateur ferme ou actualise la page, handleBeforeunload le fera. être déclenchée. Dans cette fonction, nous utilisons event.returnValue pour renvoyer les informations d'invite afin d'implémenter l'invite lorsque l'application est fermée.

Il convient de noter que si notre application Vue contrôle l'événement de fermeture du navigateur avec d'autres scripts JS, des conflits peuvent survenir. Pour le moment, une meilleure solution consiste à utiliser vue-router guard pour contrôler plus en détail les invites de routage.

Dans vue-router, on peut utiliser la garde beforeRouteLeave, qui se déclenche avant le départ de la route. Nous pouvons décider d'inviter si l'itinéraire actuel et l'itinéraire cible correspondent, et si l'utilisateur a effectué certaines opérations :

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您确定要离开该页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

Dans le code ci-dessus, nous déterminons d'abord s'il y a des données non enregistrées ( c'est-à-dire la variable formDirty), si elle existe, affichez la boîte de dialogue et décidez s'il faut quitter la page actuelle en fonction du choix de l'utilisateur. S'il n'existe pas, passez directement à l'itinéraire suivant.

En bref, que nous utilisions beforeunload dans une application Vue ou beforeRouteLeave dans vue-router, nous pouvons implémenter l'invite lorsque le navigateur est fermé via un code simple, ce qui améliore l'expérience tout en évitant la perte de données ou autre 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!