Correction de la fonction cleanPath de Vue Router

Introduction

Dans ce projet, vous allez apprendre à corriger un bogue dans la bibliothèque vue-router en modifiant la fonction cleanPath. La bibliothèque vue-router est une solution de routage populaire pour les applications Vue.js, et il est important de s'assurer qu'elle fonctionne correctement, en particulier pour les cas limites comme les chemins commençant par plusieurs barres obliques.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comprendre le problème de la fonction cleanPath dans la bibliothèque vue-router
• Installer les dépendances nécessaires pour le projet
• Localiser et modifier la fonction cleanPath pour corriger le problème
• Rebâtir le projet avec la fonction cleanPath mise à jour
• 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 diagnostiquer les problèmes dans les bibliothèques tierces
• Modifier et mettre à jour le code dans une bibliothèque tierce pour corriger un bogue
• Rebâtir et publier un projet avec le code mis à jour
• Tester la correction pour vous assurer que le problème est résolu

Configurer la structure du projet

Dans cette étape, vous allez configurer la structure du projet et découvrir le problème dans la bibliothèque vue-router ainsi que la manière de le corriger.

La bibliothèque vue-router présente un bogue dans la version 3.5.2 où un chemin commençant par plusieurs barres obliques (///) peut effectivement rediriger vers un autre domaine. Cela est dû au fait que la fonction cleanPath dans la bibliothèque ne remplace que deux barres obliques, au lieu de toutes les barres obliques multiples.

Pour corriger ce problème, vous devrez modifier la fonction cleanPath dans le fichier vue-router-3.5.2/src/util/path.js.

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

├── vue-router-3.5.2
├── vue.js
└── index.html

1. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
2. Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement, l'effet devrait être le suivant :

3. Copiez l'adresse de l'image ci-dessus pour ouvrir une nouvelle fenêtre dans votre navigateur et cliquez sur le bouton "Go to Foo" et la page ira vers une page Google.

Corriger la fonction cleanPath

1. Ouvrez le fichier vue-router-3.5.2/src/util/path.js.

2. Localisez la fonction cleanPath :

   export function cleanPath(path: string): string {
     return path.replace(/\/\//g, "/");
   }
   

3. Mettez à jour la fonction cleanPath pour remplacer toutes les barres obliques multiples par une seule barre oblique :

   export function cleanPath(path: string): string {
     return path.replace(/\/+/g, '/');
   }
   

   L'expression régulière /\/+/g correspondra à une ou plusieurs barres obliques consécutives et les remplacera par une seule barre oblique.

Rebâtir et tester le projet

1. Dans le terminal, accédez au répertoire vue-router-3.5.2.
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 avec la fonction cleanPath mise à jour.
4. Revenez sur la page web et rafraîchissez-la.
5. Cliquez sur le bouton "Go to Foo", et vous devriez constater que la page ne redirige plus vers une page Google, mais reste sur l'application locale.

Félicitations! Vous avez réussi à corriger le problème dans la bibliothèque vue-router en mettant à jour la fonction cleanPath.

Résumé

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