Abrufen von Objektparametern aus der Abfrage

Einführung

In diesem Projekt lernst du, wie du einen Fehler in der vue-router-Bibliothek beheben kannst, der Probleme verursacht, wenn ein Objekt an den Query-Parameter übergeben wird. Dieses Projekt führt dich durch die notwendigen Schritte, um die problematische Datei zu finden, den Fehler zu identifizieren und eine Lösung zur Behebung des Fehlers umzusetzen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Entwicklungsumgebung einrichtest und die erforderlichen Abhängigkeiten installierst
• Wie du die Datei findest, in der der Fehler enthalten ist, und dich darauf vorbereitest, ihn zu beheben
• Wie du den Fehler in der resolveQuery-Funktion behebst
• Wie du die Behebung des Fehlers neu bittest und testest, um sicherzustellen, dass das Problem behoben ist

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Fehler in einer Drittanbieter-Bibliothek zu identifizieren und zu beheben
• Objektwerte in Query-Parametern zu verarbeiten
• Änderungen zu überprüfen, um sicherzustellen, dass sie wie erwartet funktionieren
• Zu Open-Source-Projekten beizutragen und deine Problemlöse- und Debugging-Fähigkeiten zu verbessern

Skills Graph

Behebe den Fehler

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

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

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, und du wirst die Seite sehen.

Öffne die Browserkonsole und beobachte die Ausgabe. Klicke zunächst auf die Schaltfläche "test", dann auf die Schaltfläche "pushQuery". Die Vorschauseite im Browser sollte wie folgt aussehen:

Im Code von vue-router v3.4.1 besteht ein Bug darin, dass wenn this.$router.push verwendet wird und der value zu einem key in query ein Objekt ist, es als Zeichenfolge "[object object]" gelesen wird, was es uns verhindert, den Wert des Objekts korrekt abzurufen. Bitte behebe dieses Problem.

In diesem Schritt wirst du den Fehler in der resolveQuery-Funktion beheben.

1. Locate die Datei vue-router-3.4.1/src/util/query.js und gehe zur Zeile 41, um das Problem auf der Grundlage der Reproduktion des Fehlers zu lösen.

2. Die castQueryParamValue-Funktion sollte den Fall behandeln, dass der Wert ein Objekt ist. Ändere die Funktion wie folgt:

   const castQueryParamValue = (value) =>
     typeof value == "number" ? "" + value : value;

Baue das Paket neu und teste die Behebung

In diesem Schritt wirst du das Paket vue-router-3.4.1 neu bauen und die Behebung testen.

1. Öffne im Terminal das Verzeichnis vue-router-3.4.1.
2. Führe den Befehl npm install aus, um die Abhängigkeiten zu installieren. Dieser Vorgang kann einige Zeit in Anspruch nehmen, bitte seien Sie geduldig. (Wenn es lange anhält, drücken Sie Ctrl+C, um den Vorgang abzubrechen, 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. Starte die Seite neu und klicke auf "Web 8080", um die Seite anzuzeigen.
5. Öffne die Browserkonsole erneut und beobachte die Ausgabe. Klicke zunächst auf die Schaltfläche "Test", dann auf die Schaltfläche "pushQuery", um die Wirkung der Behebung zu sehen und zu testen.

Die Behebung sollte jetzt den Fall richtig behandeln, dass der value zu einem key in query ein Objekt ist, und Sie sollten sehen, dass das Objekt korrekt in der Konsole angezeigt wird.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.