pathMatch vide pour le calcul du chemin correct

Introduction

Dans ce projet, vous allez apprendre à corriger un bogue dans la bibliothèque vue-router-3.1.5. Le bogue est lié à la fonction fillParams, qui est responsable de remplir les paramètres dans le chemin d'URL. Lorsque le paramètre pathMatch est une chaîne de caractères vide, cela peut affecter le calcul du chemin correct.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment localiser la fonction fillParams dans le fichier vue-router-3.1.5/src/util/params.js
• Comment modifier la fonction fillParams pour résoudre le problème du pathMatch vide
• Comment reconstruire le projet vue-router avec la fonction fillParams mise à jour
• Comment tester la correction en actualisant la fenêtre du navigateur et en vérifiant le bon fonctionnement de la barre d'adresse

🏆 Réalisations

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

• Identifier et corriger les bugs dans une bibliothèque tiers
• Rebâtir un projet après avoir apporté des modifications au code
• Tester une correction pour vous assurer que le comportement souhaité est atteint

Corrigez la fonction fillParams

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

├── vue-router-3.1.5
├── 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-la manuellement, l'effet devrait être le suivant :

3. Copiez l'adresse de la figure ci-dessus dans le navigateur pour ouvrir une nouvelle fenêtre, cliquez respectivement sur le bouton "[button1]" et le bouton "[button2]", l'effet de la barre d'adresse est le suivant :

Dans cette étape, vous allez corriger la fonction fillParams dans le fichier vue-router-3.1.5/src/util/params.js pour résoudre le problème du pathMatch vide.

1. Ouvrez le fichier vue-router-3.1.5/src/util/params.js.
2. Localisez la fonction fillParams.
3. Ajoutez le code suivant après la ligne if (params.pathMatch) params[0] = params.pathMatch :

if (params.pathMatch === "") params[0] = "";

Ce code vérifie si params.pathMatch est une chaîne de caractères vide. Si c'est le cas, la fonction renverra le path original au lieu d'essayer de remplir les paramètres.

La fonction fillParams mise à jour devrait ressembler à ceci :

export function fillParams(
  path: string,
  params:?Object,
  routeMsg: string
): string {
  params = params || {};
  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path));

    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch;
    if (params.pathMatch === "") params[0] = "";

    return filler(params, { pretty: true });
  } catch (e) {
    if (process.env.NODE_ENV!== "production") {
      // Fix #3072 no warn if `pathMatch` is string
      warn(
        typeof params.pathMatch === "string",
        `missing param for ${routeMsg}: ${e.message}`
      );
    }
    return "";
  } finally {
    // delete the 0 if it was added
    delete params[0];
  }
}

Rebâtissez et testez le projet vue-router

Dans cette étape, vous allez tester la correction en actualisant la fenêtre du navigateur.

1. Ouvrez le répertoire vue-router-3.1.5 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 reconstruire et publier le projet.
4. Revenez à la fenêtre du navigateur et rafraîchissez la page.
5. Cliquez à nouveau sur les boutons "[button1]" et "[button2]" et observez le comportement de la barre d'adresse.

La barre d'adresse devrait maintenant afficher le chemin correct, même lorsque pathMatch est une chaîne de caractères vide. L'image de l'effet après la correction du problème est montrée ci-dessous :

Félicitations! Vous avez réussi à corriger le problème dans la bibliothèque vue-router-3.1.5.

Résumé

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