Entferne die Warnung, die durch pathMatch generiert wird

Einführung

In diesem Projekt lernst du, wie du ein Warnungsproblem in der vue-router 3.1.3 Bibliothek beheben kannst. Die vue-router ist eine beliebte Routenbibliothek für Vue.js-Anwendungen, und in der 3.1.3 Version gab es einen Fehler, der eine Warnung ausgab, wenn der pathMatch-Parameter ein leerer Wert war. Indem du dem Schritt-für-Schritt-Leitfaden folgst, wirst du in der Lage sein, das Problem zu finden, den Code zu beheben und die Bibliothek neu zu bauen, um die Warnung zu beheben.

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Problem in der params.js-Datei der vue-router 3.1.3 Bibliothek identifizierst
• Wie du den Code behebt, um die Warnung zu entfernen
• Wie du die vue-router 3.1.3 Bibliothek mit der Behebung neu bauen
• Wie du die gefixte Version testest, um sicherzustellen, dass die Warnung nicht mehr angezeigt wird

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Probleme in einer Drittanbieterbibliothek diagnostizieren und beheben
• Die Wichtigkeit des Aktualisierens von Abhängigkeiten und des Behebens bekannter Fehler verstehen
• Den Prozess der Neubau einer Bibliothek nach Änderungen am Code demonstrieren
• Die Funktionalität einer Bibliothek testen, um sicherzustellen, dass sie wie erwartet funktioniert

Behebe die Warnung in Vue-Router 3.1.3

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

├── vue-router-3.1.3
├── 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, klicke auf "/nope/", dann auf "test" und öffne die Option Console in der Browserkonsole, und du wirst die folgende Nachricht sehen:

[vue-router] missing param for named route "NotFound": Expected "0" to be defined

In diesem Schritt wirst du lernen, wie du die Warnung beheben, die durch das pathMatch-Problem im vue-router 3.1.3-Code generiert wird.

1. Öffne die Datei vue-router-3.1.3/src/util/params.js.
2. Locate the code on line 28 that is causing the warning:

if (process.env.NODE_ENV !== "production") {
  warn(false, `missing param for ${routeMsg}: ${e.message}`);
}

3. Kommentiere den warn-Funktionsaufruf aus, um die Warnung zu entfernen:

if (process.env.NODE_ENV !== "production") {
  // warn(false, `missing param for ${routeMsg}: ${e.message}`)
}

Dadurch wird verhindert, dass die Warnung in der Konsole angezeigt wird.

Erneuere und teste das Vue-Router 3.1.3-Projekt

In diesem Schritt wirst du das vue-router 3.1.3-Projekt nach Behebung der Warnung erneuern und testen.

1. Öffne ein Terminal und navigiere zum vue-router-3.1.3-Verzeichnis.
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 zu erneuern und freizugeben. Dies erzeugt eine neue Version der vue-router 3.1.3-Bibliothek mit der Behebung der Warnung.
4. Öffne die Seite Web 8080 in Ihrem Browser.
5. Klicke auf den Link "/nope/", dann auf den Link "test".
6. Öffne die Browserkonsole und überprüfe, dass die Warnmeldung nicht mehr angezeigt wird.

Glückwunsch! Sie haben das Warnungsproblem in der vue-router 3.1.3-Bibliothek erfolgreich behoben.

Zusammenfassung

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