Speichern Zustand auf Zurück-Taste Drücken Sie in Vue-Elektron

Question

Ich möchte eine Desktop-App in Vue-Elektron machen. Ich bin neu sowohl für vue.js als auch für Elektron. Ich habe einige Probleme beim Verwalten des Status.

Wenn ich auf Login-Button klicken https://cloudup.com/cFl9MTY6cnn I-Daten senden, dh sessionId und Benutzername zum nächsten Bildschirm https://cloudup.com/c76fmL8OGbF und auf diesem Bildschirm angezeigt wird ich diese Requisiten https://cloudup.com/csahnc6Z04J diesen Code https://cloudup.com/cdR0F6Qyt-3 aber als ich zum dritten Bildschirm ging https://cloudup.com/c0F1ztX8qu3 und kommen dann zurück dann diesem Daten verschwinden https://cloudup.com/cTFW32DxeRa

ich auf dem zweiten Bildschirm werde wieder router.go mit (-1) https://cloudup.com/cvpxk4GsIRx

die vue-Router-Dokumentation https://router.vuejs.org/en/essentials/navigation.html sagt, dass „router.push Methode einen neuen Eintrag in die Geschichte Stapel schiebt, damit Wenn der Benutzer auf die Zurück-Schaltfläche des Browsers klickt, wird die vorherige URL aufgerufen. " und router.go (n)" Diese Methode verwendet eine einzelne Ganzzahl als Parameter, die angibt, um wie viele Schritte vorwärts oder rückwärts in der Verlaufsliste zu gehen ist stack "

In meinem Fall werden Lifecycle-Hooks jedoch erneut aufgerufen, wenn ich zum History-Stack zurückgehe. Das heißt also, wenn wir auf die vorherige Seite kommen, wird die Komponente erneut erstellt und nicht aus dem Stapel entfernt. Ich möchte die Seite auf der Zurück-Schaltfläche nicht aktualisieren/neu laden.

Answer 1

Sie müssen die Daten auch zum dritten Bildschirm senden.

Statt

<route-link to="third_screen"></router-link> 

Sie schreiben müssen,

<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link> 

Und statt router.go (-1), die Sie benötigen, um die Daten zu senden als params wieder zu Ihrem zweiten Bildschirm Router .push() Methode.

Aber ich werde die obige Methode nicht vorschlagen, da Sie die gleichen Daten als Parameter an alle Routen übergeben müssen.

Sie sollten sich auch Vuex ansehen.

Vuex ist eine Musterverwaltung + Bibliothek für Vue.js-Anwendungen. Es dient als zentralisierter Speicher für alle Komponenten in einer Anwendung, mit Regeln, die sicherstellen, dass der Zustand nur in vorhersehbarer Weise mutiert werden kann.

Sie sollten Ihre Sitzungs-ID als Cookie speichern, anstatt sie als Requisiten zu übergeben.

aktualisieren

haben auch einen Blick auf <keep-alive></keep-alive>.

Reference