Wiederholte Routen werden zu früh ausgelöst

Einführung

In diesem Projekt lernst du, wie du einen Fehler in der Vue Router v2.5.2 beheben kannst, bei dem die next()-Funktion der beforeRouteUpdate zu früh ausgelöst wird, wenn eine Route bei einer "aus-ein"-Transition erneut besucht wird.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Problem in der Datei vue-router-2.5.2/src/components/view.js lokalisiert und verstehst
• Wie du das Problem behebst, indem du die data.registerRouteInstance-Funktion aktualisierst
• Wie du das vue-router-2.5.2-Projekt mit der Behebung neu baufst
• Wie du die Behebung testest, um sicherzustellen, dass das Problem behoben ist

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Probleme in der Vue Router-Bibliothek zu identifizieren und zu beheben
• Ein Projekt nach Änderungen am Code neu zu bauen
• Die Behebung zu testen und zu verifizieren, um sicherzustellen, dass das Problem behoben ist

Behebung des Problems

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

├── vue-router-2.5.2
├── vue2.2.6.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, um das Seitenverhalten wie folgt zu sehen:

• Wenn du auf "to /" klickst, wird die Seite "This is A" anzeigen.
• Wenn du auf "to /b" klickst, wird die Seite "This is B" anzeigen.
• Wenn du erneut auf "to /" klickst, wird die Seite "This is" anzeigen.

In diesem Schritt wirst du das Problem in der Datei vue-router-2.5.2/src/components/view.js beheben.

1. Öffne die Datei vue-router-2.5.2/src/components/view.js.

2. Lasse die Zeile 53 der Datei auf, die die data.registerRouteInstance-Funktion ist.

3. Aktualisiere die data.registerRouteInstance-Funktion wie folgt:

   data.registerRouteInstance = (vm, val) => {
     // val könnte für die Abmeldung undefined sein
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };
   

   Die Änderung hier besteht darin, zu überprüfen, ob val und matched.instances[name] unterschiedlich sind oder ob val falsch ist und matched.instances[name] dasselbe wie vm ist. Dadurch wird sichergestellt, dass der registerRouteInstance-Hook nur dann aufgerufen wird, wenn die Instanz tatsächlich geändert hat.

4. Speichere die Änderungen in der view.js-Datei.

Projekt neu bauen und testen

In diesem Schritt wirst du das vue-router-2.5.2-Projekt neu bauen und die behebbte Wirkung testen.

1. Öffne das Verzeichnis vue-router-2.5.2 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 freizugeben.
4. Öffne die Registerkarte "Web 8080" im VM, um die aktualisierte Anwendung zu sehen.
5. Klicke auf die Schaltflächen "to /", "to /b" und "to /", um zu verifizieren, dass das Problem behoben ist.

Die Seite sollte jetzt beim erneuten Besuch der Route den richtigen Inhalt anzeigen, wie in der aktualisierten Wirkung gezeigt:

Glückwunsch! Sie haben das Problem im Code der vue-router-2.5.2-Version erfolgreich behoben.

Zusammenfassung

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