La révision de la route déclenche trop tôt

Introduction

Dans ce projet, vous allez apprendre à corriger un bogue dans Vue Router v2.5.2 où la fonction next() de beforeRouteUpdate est déclenchée trop tôt lors du retour sur une route dans une transition "sortie-entré".

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment localiser et comprendre le problème dans le fichier vue-router-2.5.2/src/components/view.js
• Comment corriger le problème en mettant à jour la fonction data.registerRouteInstance
• Comment reconstruire le projet vue-router-2.5.2 avec la correction
• Comment tester la correction pour vous assurer que le problème est résolu

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Identifier et corriger les problèmes dans la bibliothèque Vue Router
• Rebâtir un projet après avoir apporté des modifications au code
• Tester et vérifier la correction pour vous assurer qu'elle résout le problème

Skills Graph

Correction du problème

Pour commencer, regardez la structure de répertoire des fichiers sur la gauche comme suit :

├── vue-router-2.5.2
├── vue2.2.6.js
└── index.html

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez-le manuellement pour voir l'effet de la page tel que décrit ci-dessous :

• Lorsque vous cliquez sur "vers /", la page affichera "Ceci est A".
• Lorsque vous cliquez sur "vers /b", la page affichera "Ceci est B".
• Lorsque vous cliquez à nouveau sur "vers /", la page affichera "Ceci est".

Dans cette étape, vous allez corriger le problème dans le fichier vue-router-2.5.2/src/components/view.js.

1. Ouvrez le fichier vue-router-2.5.2/src/components/view.js.

2. Localisez la ligne 53 du fichier, qui est la fonction data.registerRouteInstance.

3. Mettez à jour la fonction data.registerRouteInstance comme suit :

   data.registerRouteInstance = (vm, val) => {
     // val pourrait être indéfini pour l'annulation d'enregistrement
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };

   Le changement ici est de vérifier si val et matched.instances[name] sont différents, ou si val est faux et matched.instances[name] est le même que vm. Cela garantit que le hook registerRouteInstance est appelé seulement lorsque l'instance a réellement changé.

4. Enregistrez les modifications dans le fichier view.js.

Rebâtir et tester le projet

Dans cette étape, vous allez rebâtir le projet vue-router-2.5.2 et tester l'effet du corrigé.

1. Ouvrez le répertoire vue-router-2.5.2 dans le terminal.
2. Exécutez la commande npm install pour installer les dépendances. Ce processus peut prendre un certain temps, veuillez être patient. (Si cela reste bloqué longtemps, appuyez sur Ctrl+C pour terminer le processus puis exécutez cette commande à nouveau.)
3. Une fois toutes les dépendances installées avec succès, exécutez la commande npm run build pour rebâtir et publier le projet.
4. Ouvrez l'onglet "Web 8080" dans la VM pour voir l'application mise à jour.
5. Cliquez sur les boutons "vers /", "vers /b" et "vers /" pour vérifier que le problème a été corrigé.

La page devrait maintenant afficher le contenu correct lors du retour sur la route, comme montré dans l'effet mis à jour :

Félicitations! Vous avez réussi à corriger le problème dans la version vue-router-2.5.2 du code.

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.