Envoyer une demande avant que Vue ferme la page

Lors de la création d'applications Web avec Vue.js, nous devons souvent effectuer certaines opérations pour nettoyer l'état ou envoyer quelques dernières requêtes. L'un des scénarios est que lorsque l'utilisateur ferme la page, nous devons envoyer une demande pour enregistrer l'état actuel ou effectuer certaines opérations de nettoyage pour garantir que les données ne sont pas perdues.

Dans un site Web traditionnel, nous pouvons effectuer certaines opérations dans l'événement window.onbeforeunload. Mais dans Vue.js, lorsque nous utilisons Vue Router pour la navigation dans les pages, seul le hook de navigation de Vue Router sera déclenché à la fermeture de la page, mais l'événement window.onbeforeunload ne sera pas déclenché. Alors, comment envoyer une demande avant de fermer la page ?

Dans Vue.js, nous pouvons écouter la navigation sur les itinéraires en enregistrant une garde frontale globale. Le front guard global est une fonction qui est appelée avant la navigation de routage et peut accepter trois paramètres : to (l'objet de routage cible qui est sur le point d'entrer), from (l'objet de routage que la navigation en cours est sur le point de quitter), next (appeler cette méthode pour entrer) prochain crochet).

Nous pouvons enregistrer une fonction de hook dans le front guard global, qui sera déclenchée lorsque l'utilisateur quittera la page en cours. Nous pouvons envoyer la demande dans la fonction hook et effectuer les actions dont nous avons besoin. Voici un exemple de code :

// main.js
import Vue from 'vue';
import App from './App';
import router from './router';

router.beforeEach((to, from, next) => {
  const answer = window.confirm("确定要关闭页面吗？");
  if (answer) {
    // 发送请求并执行清理操作
    // do something...
    next();
  } else {
    next(false);
  }
});

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

Dans l'exemple de code ci-dessus, nous avons enregistré un front guard global et y avons défini une fonction hook. Cette fonction de hook sera déclenchée lorsque l'utilisateur quittera la page en cours. Nous faisons apparaître une boîte de confirmation dans la fonction hook pour demander à l'utilisateur s'il est sûr de vouloir fermer la page. Si l'utilisateur confirme vouloir fermer la page, envoyer une requête et effectuer des opérations de nettoyage, sinon, annuler la navigation et rester sur la page en cours.

Il convient de noter que nous utilisons la méthode next() dans la fonction hook pour saisir le hook suivant. Si on n'appelle pas la méthode next(), la navigation sera interrompue et restera sur la page en cours.

Pour résumer, nous pouvons écouter l'événement de fermeture de page en enregistrant une fonction hook dans la garde frontale globale de Vue Router. Dans la fonction hook, nous pouvons envoyer la demande et effectuer les actions dont nous avons besoin. De cette façon, nous garantissons que les données ne sont pas perdues lorsque l'utilisateur ferme la page, tout en effectuant certaines opérations de nettoyage nécessaires.

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!