Router-Abfragewert geändert

Einführung

In diesem Projekt lernst du, wie du ein Problem in der vue-router v3.4.0 Version beheben kannst, bei der unbestimmte Werte in Router-Abfragen jetzt zu unbestimmten Zeichenketten geändert werden. Du wirst dieses Problem beheben, indem du die resolveQuery-Funktion in der query.js-Datei der vue-router-Bibliothek modifizierst.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Die resolveQuery-Funktion in der query.js-Datei finden und verstehen
• Die resolveQuery-Funktion modifizieren, um unbestimmte Werte in der Abfrage richtig zu behandeln
• Das vue-router 3.4.0 Projekt mit der Behebung neu bauen
• Die Behebung testen, um sicherzustellen, dass unbestimmte Werte in der Abfrage jetzt als leere Zeichenketten korrekt angezeigt werden

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Probleme in einer Drittanbieter-Bibliothek identifizieren und beheben
• Techniken zum Modifizieren und Neubauen eines Projekts anwenden, um eine Behebung anzuwenden
• Die Wichtigkeit der gründlichen Tests von Änderungen verstehen, um sicherzustellen, dass das gewünschte Verhalten erreicht wird

Projektstruktur einrichten

Um loszulegen, betrachte die Verzeichnisstruktur der Dateien links wie folgt:

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

1. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke des 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 dem obigen Bild in Ihren Browser und öffne ein neues Fenster, um die Adresszeile und die Aussehen der Seite zu sehen.

Das Problem mit den unbestimmten Abfragewerten in Vue-Router 3.4.0 beheben

In diesem Schritt lernst du, wie du das Problem beheben kannst, dass unbestimmte Werte in Router-Abfragen in der vue-router v3.4.0 Version jetzt zu unbestimmten Zeichenketten geändert werden.

1. Öffne die Datei vue-router-3.4.0/src/util/query.js.
2. Locate die resolveQuery-Funktion in der Datei.
3. Aktualisiere die resolveQuery-Funktion, um unbestimmte Werte in der Abfrage zu behandeln. Ändere den Code wie folgt:

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

Die wichtigsten Änderungen sind:

• In der Zuweisung parsedQuery[key] =... überprüfen wir, ob der value undefined ist. Wenn ja, weisen wir einen leeren String '' zu, anstatt den undefined-Wert.
• Für Array-Werte überprüfen wir auch, ob die einzelnen Elemente undefined sind und ersetzen sie durch einen leeren String.

Dadurch wird sichergestellt, dass unbestimmte Werte in der Abfrage richtig behandelt werden und nicht zu unbestimmten Zeichenketten umgewandelt werden.

Die Behebung testen

1. Öffne das Verzeichnis vue-router-3.4.0 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ühren Sie den Befehl npm run build aus, um das Projekt neu zu bauen und zu veröffentlichen.
4. Aktualisiere das Browserfenster, das die Startseite angezeigt hat.
5. Beobachte das Verhalten der Seite und die URL in der Adresszeile. Die unbestimmten Werte in der Abfrage sollten jetzt richtig behandelt und als leere Zeichenketten angezeigt werden.

Herzlichen Glückwunsch! Sie haben das Problem mit den unbestimmten Abfragewerten in der vue-router 3.4.0 Version erfolgreich behoben.

Zusammenfassung

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