Valeur de requête de routeur modifiée

Introduction

Dans ce projet, vous allez apprendre à résoudre un problème dans la version 3.4.0 de vue-router où les valeurs indéfinies dans les requêtes de routeur sont désormais converties en chaînes de caractères indéfinies. Vous allez corriger ce problème en modifiant la fonction resolveQuery dans le fichier query.js de la bibliothèque vue-router.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Localiser et comprendre la fonction resolveQuery dans le fichier query.js
• Modifier la fonction resolveQuery pour gérer correctement les valeurs indéfinies dans la requête
• Rebâtir le projet vue-router 3.4.0 avec la correction
• Tester la correction pour vous assurer que les valeurs indéfinies dans la requête sont désormais correctement affichées comme des chaînes de caractères vides

🏆 Réalisations

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

• Identifier et corriger les problèmes dans une bibliothèque tiers
• Appliquer des techniques de modification et de rebâtiment d'un projet pour appliquer une correction
• Comprendre l'importance de tester soigneusement les modifications pour vous assurer que le comportement souhaité est atteint

Skills Graph

Configurer la structure du projet

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

├── vue-router-3.4.0
├── 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 dans votre navigateur et ouvrez une nouvelle fenêtre pour voir la barre d'adresse et l'allure de la page.

Résoudre le problème des valeurs de requête indéfinies dans Vue-Router 3.4.0

Dans cette étape, vous allez apprendre à résoudre le problème où les valeurs indéfinies dans les requêtes de routeur sont désormais converties en chaînes de caractères indéfinies dans la version 3.4.0 de vue-router.

1. Ouvrez le fichier vue-router-3.4.0/src/util/query.js.
2. Localisez la fonction resolveQuery dans le fichier.
3. Mettez à jour la fonction resolveQuery pour gérer les valeurs indéfinies dans la requête. Modifiez le code comme suit :

export function resolveQuery(
  query:?string,
  extraQuery: Dictionary<string> = {},
  _parseQuery:?Function
): Dictionary<string> {
  //...

  // TODO
  for (const key in extraQuery) {
    const value = extraQuery[key];
    parsedQuery[key] = Array.isArray(value)
   ? value.map((v) => (!v? v : "" + v))
      :!value
       ? value
        : "" + value;
  }
  return parsedQuery;
}

Les principales modifications sont les suivantes :

• Dans l'affectation parsedQuery[key] =..., nous vérifions si la value est undefined. Si c'est le cas, nous assignons une chaîne de caractères vide '' au lieu de la valeur undefined.
• Pour les valeurs de tableau, nous vérifions également si les éléments individuels sont undefined et les remplaçons par une chaîne de caractères vide.

Cela garantit que les valeurs indéfinies dans la requête sont correctement gérées et ne sont pas converties en chaînes de caractères indéfinies.

Tester la correction

1. Ouvrez le répertoire vue-router-3.4.0 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 le processus 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. Rafraîchissez la fenêtre du navigateur qui affichait la page initiale.
5. Observez le comportement de la page et l'URL dans la barre d'adresse. Les valeurs indéfinies dans la requête devraient désormais être correctement gérées et affichées comme des chaînes de caractères vides.

Félicitations! Vous avez réussi à corriger le problème des valeurs de requête indéfinies dans la version 3.4.0 de vue-router.

Sommaire

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