Leerer pathMatch für die korrekte Pfadberechnung

Einführung

In diesem Projekt lernst du, wie ein Bug in der vue-router-3.1.5 Bibliothek behoben wird. Der Bug betrifft die fillParams-Funktion, die für das Ausfüllen der Parameter im URL-Pfad verantwortlich ist. Wenn der pathMatch-Parameter eine leere Zeichenkette ist, kann dies die Berechnung des korrekten Pfads beeinflussen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die fillParams-Funktion in der Datei vue-router-3.1.5/src/util/params.js finden
• Wie du die fillParams-Funktion modifizierst, um das Problem mit einem leeren pathMatch zu beheben
• Wie du das vue-router-Projekt mit der aktualisierten fillParams-Funktion neu bauen
• Wie du die Behebung durch das Neuladen des Browserfensters und das Überprüfen des korrekten Verhaltens der Adresszeile testest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Bugs in einer Drittanbieterbibliothek zu identifizieren und zu beheben
• Ein Projekt nach Codeänderungen neu zu bauen
• Eine Behebung zu testen, um sicherzustellen, dass das gewünschte Verhalten erreicht wird

Skills Graph

Behebe die fillParams-Funktion

Beginnen wir mit der Betrachtung der Verzeichnisstruktur der Dateien links wie folgt:

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

1. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
2. Öffne "Web 8080" oben im VM und aktualisiere es manuell. Das Ergebnis sollte wie folgt aussehen:

3. Kopiere die Adresse in der obigen Abbildung in den Browser, um jeweils ein neues Fenster zu öffnen. Klicke auf die Schaltfläche "[button1]" und "[button2]". Der Effekt in der Adresszeile ist wie folgt:

In diesem Schritt wirst du die fillParams-Funktion in der Datei vue-router-3.1.5/src/util/params.js beheben, um das Problem mit einem leeren pathMatch zu beheben.

1. Öffne die Datei vue-router-3.1.5/src/util/params.js.
2. Locate die fillParams-Funktion.
3. Füge den folgenden Code nach der Zeile if (params.pathMatch) params[0] = params.pathMatch hinzu:

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

Dieser Code überprüft, ob params.pathMatch eine leere Zeichenkette ist. Wenn ja, wird die Funktion den ursprünglichen path zurückgeben, anstatt die Parameter auszufüllen.

Die aktualisierte fillParams-Funktion sollte wie folgt aussehen:

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];
  }
}

Erneuere und teste das vue-router-Projekt

In diesem Schritt wirst du die Behebung durch das Neuladen des Browserfensters testen.

1. Öffne das Verzeichnis vue-router-3.1.5 im Terminal.
2. Führe den Befehl npm install aus, um die Abhängigkeiten zu installieren. Dieser Prozess kann einige Zeit in Anspruch nehmen, bitte seien Sie geduldig. (Wenn es lange anhält, drücken Sie Ctrl+C, um den Prozess zu beenden, und führen Sie dann diesen Befehl erneut aus.)
3. Nachdem alle Abhängigkeiten erfolgreich installiert wurden, führe den Befehl npm run build aus, um das Projekt neu zu bauen und zu veröffentlichen.
4. Gehe zurück zum Browserfenster und aktualisiere die Seite.
5. Klicke erneut auf die Schaltflächen "[button1]" und "[button2]" und beobachte das Verhalten der Adresszeile.

Die Adresszeile sollte jetzt den korrekten Pfad anzeigen, auch wenn pathMatch eine leere Zeichenkette ist. Das Bild des Effekts nach der Behebung des Problems ist unten gezeigt:

Herzlichen Glückwunsch! Sie haben das Problem in der vue-router-3.1.5 Bibliothek erfolgreich behoben.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Labore absolvieren, um Ihre Fähigkeiten zu verbessern.