Vue Routing gibt die Betriebsmethode zum Wiederherstellen des Seitenstatus zurück

Routenparameter, Routennavigationswächter: Beibehaltung der Suchergebnisse bei Rückkehr der Seite

Anforderungsszenario: Suchen Sie auf der Startseite nach Inhalten, klicken Sie, um zur Detailseite zu springen, kehren Sie zur Startseite zurück und behalten Sie die Suchergebnisse.

Lösung: Routing-Parameter; Routing-Guards

Anforderungsbeschreibung

Beim Entwickeln des Front-Ends mit Vue bin ich auf ein Szenario gestoßen: Ich habe auf der Startseite nach einigen Daten gesucht, auf die Suchergebnisse geklickt, um auf die Detailseite zu gelangen, und bin dann nach dem Durchsuchen der Detailseite zur Startseite zurückgekehrt. Allerdings verschwinden dabei der vorherige Suchverlauf und das Umblättern, was zu einer schlechten Benutzererfahrung führt. Daher ist es notwendig, den Seitenparameterstatus vor dem Sprung nach der Rückkehr wiederherzustellen.

Wenn die Bedingungen es erlauben, ist es natürlich am einfachsten, auf die Suchergebnisse zu klicken und sie auf einer neuen Seite zu öffnen (so wie es Baidu macht). Allerdings besteht die aktuelle Anforderung in einem vollständigen Vue-Entwicklungsprojekt, bei dem keine externe Adresse geöffnet werden darf und es nicht viele Details gibt. Daher ist die Verwendung einer neuen Seite nicht sinnvoll (die Leistung ist schlecht und es können leicht sehr viele Registerkarten erstellt werden).

Hier sind zwei Lösungen, die einfacher zu implementieren sind:

• Lösung 1: Hinterlegen der Suchparameter in den Routenparametern (route.query) und Suchen anhand der Parameter beim Laden der Seite

Vorteile: keine Auswirkung auf die Aktualisierung; einfache Implementierung

Nachteile: Parameter können nur Basistypen sein und haben eine begrenzte Länge; der Pfad sieht hässlich aus; nur für Browserrückläufe gültig, manueller Sprung zurück zur Homepage funktioniert nicht

• Lösung 2: Verwenden Sie den Route Guard-Hook, um Seitenparameter lokal zu speichern, bevor Sie die Seite verlassen (vuex, Local Storage usw.).

Vorteile: Der Parametertyp und die Länge sind relativ frei; der Pfad sieht erfrischend und schön aus; er ist effektiv, um auf jede Art zur Homepage zurückzukehren

Nachteile: Es sind zusätzliche Datenspeichervorgänge erforderlich. Wenn der Store-Modus oder Vuex verwendet wird, schlägt das Aktualisieren der Seite fehl.

Lösung 1: Routing-Parameter

Wenn es nicht viele Parameter gibt und es Ihnen nichts ausmacht, dass nach dem Pfad eine lange Parameterfolge steht (ich vergieße Tränen der Zwangsstörung), können Sie die Parameter direkt in den Routing-Pfad einfügen (Baidu macht das beispielsweise so: baidu.com/s?wd=abc&rsv_spt=1&rsv_iqid=0x8a76279a000e2979&... , wie Sie sehen, handelt es sich tatsächlich um eine lange Zeichenfolge).

Nachdem Sie auf „Suchen“ geklickt haben, verwenden Sie den Vue-Router zum Springen und Übergeben von Parametern:

// Suchseite search(param) {
  // Andere Verarbeitung this.$router.push({
      Name: "Index",
      query: { …this.queryParam }, // Erweitere das Objekt in Schlüssel und Werte });
},

Hierbei ist auf den Unterschied zwischen der Übergabe von Abfrageparametern und der Übergabe von Parametern zu achten: Die Parameter der ersteren werden nach dem Pfad in der Form ?k1=v1&k2=v2 fortgesetzt und sind direkt in der Adressleiste sichtbar, sodass sie von Seitensprüngen oder Aktualisierungen nicht betroffen sind; die letztere funktioniert nur beim ersten Sprung auf die entsprechende Seite und verschwindet beim Aktualisieren. Daher wird hier zur Parameterübergabe eine Abfrage verwendet. Es ist auch möglich, die Parameter entsprechend dem Format manuell in den Pfad zu schreiben, aber die Lesbarkeit und Skalierbarkeit sind dann offensichtlich schlechter. Es wird nicht empfohlen, es sei denn, es gibt nur ein oder zwei einfache Parameter.

Da dieser Parameter außerdem im Pfad platziert werden soll, kann es sich nur um ein Schlüssel-Wert-Paar grundlegender Typen handeln, und Arrays oder Objekte können nicht gut unterstützt werden. Bei einfachen Parametern können Sie die entsprechenden Objekte als Parameter erweitern (Sie müssen sicherstellen, dass in verschiedenen Objekten keine doppelten Schlüssel vorhanden sind). Beim Lesen der Suchergebnisseite, zu der Sie springen, können Sie die Attribute jedoch nur einzeln abrufen.

// Suchergebnisseite gemountet() {
  // Unterscheiden Sie zwischen $route und $router
  wenn (diese.$route.query.type) {
    lass Typ = this.$route.query.type;
    let Schlüsselwort = this.$route.query.keyword;
    // ...alle Parameter einzeln abrufen//Suchvorgang ausführen} else {
    // Keine Suchparameter (da meine Suchergebnisse und meine Homepage auf derselben Seite liegen, kann es sein, dass ich einfach ganz normal die Homepage öffne)
  }
},

Lösung 2: Lokale Speicherparameter

Da es sich bei den Parametern, die ich speichern möchte, um drei Objekte handelt, ist es zu umständlich, sie in Schlüsselwerte zu erweitern. Daher habe ich diese Lösung verwendet. Da Vuex auch im Projekt verwendet wird, wird es in Vuex gespeichert. Es kann je nach tatsächlicher Situation überall gespeichert werden. Der Nachteil von vuex besteht darin, dass es nach der Aktualisierung verschwindet, was sich kaum auf Suchergebnisse und andere Funktionen auswirkt, die das Erlebnis optimieren. Bei entsprechender Nachfrage kann es im lokalen Speicher gespeichert werden.

Da es für meine Anforderungen viele Möglichkeiten zum Ändern von Parametern gibt, ist das Speichern von Parametern beim Ändern zu mühsam und es können leicht Fehler oder Auslassungen passieren. Aus diesem Grund speichern wir die erforderlichen Parameter vor dem Routing-Sprung einheitlich.

Vue Router bietet eine Reihe von Routing-Navigationsschutz-APIs zur Implementierung entsprechender Funktionen, darunter globale Pre-/Parse-/Post-Schutzfunktionen, Routing-Konfigurationsschutzfunktionen, Komponentenschutzfunktionen usw. Der sogenannte „Guard“ entspricht eigentlich dem „Hook“ im Render-Prozess, also dem bekannten Erstellen und Montieren.

Vollständiger Navigationsanalyseprozess:

1. Die Navigation wird ausgelöst.
2. Rufen Sie beforeRouteLeave Schutz in der deaktivierten Komponente auf.
3. Ruft den globalen beforeEach Schutz auf.
4. Rufen Sie beforeRouteUpdate “-Schutz in wiederverwendeten Komponenten auf (2.2+).
5. Rufen Sie beforeEnter in der Routenkonfiguration auf.
6. Asynchrone Routingkomponenten auflösen.
7. Rufen Sie beforeRouteEnter in der aktivierten Komponente auf.
8. Ruft den globalen beforeResolve Schutz auf (2.5+).
9. Navigation bestätigt.
10. Rufen Sie den globalen afterEach Hook auf.
11. Löst ein DOM-Update aus.
12. Rufen Sie die Rückruffunktion auf, die im beforeRouteEnter Schutz an next übergeben wurde, und die erstellte Komponenteninstanz wird als Parameter der Rückruffunktion übergeben.

Offensichtlich kann der beforeRouteLeave Hook die Anforderungen hier gut erfüllen:

// Suchergebnisseite beforeRouteLeave(to, from, next) {
  // Vuex-Speichervorgang this.$store.commit("updateRevert", {
    Abfrage: this.queryParam,
    Seite: this.pageParam,
    Filter: dieser.Filter,
  });
  next(); //Setze den nachfolgenden Navigationsanalyseprozess fort},

Prüfen Sie beim Laden einer Seite, ob gespeicherte Parameter vorhanden sind und stellen Sie diese ggf. wieder her:

// Suchergebnisseite gemountet() {
  // Prüfen, ob in Vuex gespeicherte Suchparameter vorhanden sind, if (this.$store.state.revert) {
    const revert = this.$store.state.revert;
    Dies.QueryParam = Zurücksetzen.Query;
    this.pageParam = revert.page; // Sie können das gesamte Objekt direkt abrufen // Suchvorgang } else {
    // Keine Suchparameter (da meine Suchergebnisse und meine Homepage auf derselben Seite liegen, kann es sein, dass ich einfach ganz normal die Homepage öffne)
  }
},

Fazit & Referenzen

Oben sind zwei Möglichkeiten zum Speichern des Seitenstatus aufgeführt. Viele dieser Entscheidungen hängen mit den tatsächlichen Bedürfnissen zum jeweiligen Zeitpunkt zusammen und sind daher möglicherweise nicht in allen Szenarien die beste Lösung. Für Ihre speziellen Anforderungen reichen die Lösungen in diesem Artikel möglicherweise nicht aus oder es gibt einfachere Methoden. Im Artikel werden die tatsächlichen Anforderungen und Grundlagen jedes Schritts so weit wie möglich als Referenz erläutert. Eventuelle Auslassungen oder Mängel im Artikel können Sie gerne in den Kommentaren diskutieren und korrigieren.

Programmatische Navigation

Routennavigationswächter

Dies ist das Ende dieses Artikels über die Vue-Routing-Rückgabe und den Wiederherstellungsseitenstatus. Weitere relevante Inhalte zum Vue-Routing-Seitenstatus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!