Ich habe die folgende Sequenz passiert:
Hauptbildschirm
Ladebildschirm
Ergebnisbildschirm
Wenn jemand auf der Homepage auf eine Schaltfläche klickt, sende ich ihn an den Ladebildschirm über:
this.$router.push({path: "/loading"});
Und sobald ihre Aufgabe erledigt ist, werden sie über an den Ergebnisbildschirm gesendet
this.$router.push({path: "/results/xxxx"});
Das Problem ist, dass sie normalerweise von den Ergebnissen zurück zum Hauptbildschirm wechseln möchten. Wenn sie jedoch zurückklicken, werden sie erneut zum Laden gesendet, wodurch sie zu den Ergebnissen zurückkehren, sodass sie in einer Endlosschleife stecken bleiben und nicht mehr gehen können zurück zum Hauptbildschirm.
Irgendwelche Ideen, wie man das behebt? Ich würde im Idealfall gerne eine Option wie:
this.$router.push({path: "/loading", addToHistory: false});
das würde sie zur Route schicken, ohne sie der Geschichte hinzuzufügen.
quelle
this.$router.replace({path: "/results/xxxx"})
$router.replace
vom Laden an. Auf diese Weise kann ich jetzt von Ergebnisse -> Haupt zurückkehren, aber dann kann ich nicht zu den Ergebnissen übergehen.Antworten:
Es gibt eine perfekte Möglichkeit, mit dieser Situation umzugehen
Sie können den komponenteninternen Schutz verwenden , um die Route in Granulat-Ebene zu steuern
Nehmen Sie die folgenden Änderungen in Ihrem Code vor
In der Hauptbildschirmkomponente
Beim Laden der Bildschirmkomponente
In Ergebnisbildschirmkomponente
Ich habe gerade eine kleine Vue-Anwendung erstellt, um das gleiche Problem zu reproduzieren. Es funktioniert in meinem lokalen gemäß Ihrer Frage. Hoffe, es löst auch Ihr Problem .
quelle
Ich denke, es
router.replace
ist der richtige Weg - aber immer noch einige Gedankengänge (ungetestet):Grundsätzlich wird
$router
beim Laden die Ladekomponente gerendert, bis sie ausgegeben wirdload:stop
, und dann wird die Ladekomponente gerendertrouter-view
quelle
Dies ist eine schwierige Aufgabe, wenn man bedenkt, wie wenig wir über die Vorgänge auf Ihrer Laderoute wissen.
Aber...
Ich musste noch nie eine Laderoute erstellen, sondern nur Komponenten laden, die während der Init- / Datenerfassungsphase auf mehreren Routen gerendert werden.
Ein Argument für das Fehlen einer Laderoute wäre, dass ein Benutzer möglicherweise (versehentlich) direkt zu dieser URL navigieren könnte und dann nicht genügend Kontext vorhanden wäre, um zu wissen, wohin der Benutzer gesendet werden soll oder welche Maßnahmen er ergreifen soll. Dies könnte jedoch bedeuten, dass es an dieser Stelle zu einer Fehlerroute kommt. Insgesamt keine tolle Erfahrung.
Ein weiterer Grund ist, dass die Navigation zwischen Routen viel einfacher wird und sich wie erwartet / gewünscht verhält, wenn Sie Ihre Routen vereinfachen
$router.replace
.Ich verstehe, dass dies die Frage nicht so löst, wie Sie es stellen. Aber ich würde vorschlagen, diese Laderoute zu überdenken.
App
Schale
Hauptseite
Ergebnisseite
Ergebniskomponente
Grundsätzlich genau die gleiche Ergebniskomponente, die Sie bereits haben, aber wenn dies
loading
zutrifft oder wennresults
es null ist, können Sie ein gefälschtes Dataset erstellen, um es zu iterieren und Skelettversionen zu erstellen, wenn Sie möchten. Ansonsten können Sie die Dinge einfach so halten, wie Sie sie haben.quelle
Eine weitere Option ist die Verwendung der Verlaufs-API .
Sobald Sie sich im Ergebnisbildschirm befinden, können Sie den ReplaceState verwenden , um die URL im Verlauf des Browsers zu ersetzen.
quelle
Dies kann mit dem
beforeEach
Haken des Routers erfolgen.Sie müssen beim Laden
loading
der Daten eine Variable global oder in localStorage in der Komponente speichern (bevor Sie zurresults
Komponente umleiten ):Und dann sollten Sie im beforeEach-Hook nach dieser Variablen suchen und zur richtigen Komponente springen:
Denken Sie auch daran, den Wert in Ihrer
main
Komponente auf false zurückzusetzen, wenn Sie auf die Abfrageschaltfläche klicken (bevor Sie zurloading
Komponente weiterleiten):quelle
Ihr Ladebildschirm sollte überhaupt nicht vom Vue-Router gesteuert werden. Die beste Option ist die Verwendung eines Modals / Overlays für Ihren Ladebildschirm, das von Javascript gesteuert wird. Es gibt viele Beispiele für Vue. Wenn Sie nichts finden können, hat vue-bootstrap einige einfache Beispiele zu implementieren.
quelle