Spezifische Schritte für den Vue-Browser zur Rückgabe der Überwachung

Vorwort

Beim Teilen einer Seite hoffen Sie, durch Klicken auf die Zurück-Schaltfläche des Browsers zur Projekt-Homepage zurückzukehren und so die Anzahl der Besuche zu erhöhen.

Sie müssen auf die Zurück-Schaltfläche des Browsers achten und dessen Standardereignis verhindern.

Die einzelnen Schritte sind wie folgt:

1. Bestimmen Sie nach Abschluss der Montage, ob der Browser Popstate unterstützt

montiert(){
 wenn (Fenster.History && Fenster.History.PushState) {
 history.pushState(null, null, Dokument.URL);
 window.addEventListener('popstate', this.goBack, false);
 }
},

2. Wenn die Seite zerstört ist, brechen Sie die Überwachung ab. Andernfalls werden auch andere Vue-Routingseiten überwacht

zerstört()
 window.removeEventListener('popstate', this.goBack, false);
},

3. Schreiben Sie den Überwachungsvorgang in Methoden. Der Inhalt von removeEventListener zum Abbrechen der Überwachung muss mit dem Inhalt zum Öffnen der Überwachung übereinstimmen, daher wird die Funktion in Methoden geschrieben.

Methoden:{
 geh zurück(){
 dies.$router.replace({Pfad: '/'});
 //replace ersetzt die ursprüngliche Route, um ein Zurückfallen in eine Endlosschleife zu vermeiden}
}

P.S. Wofür wird Popstate verwendet?

Wie verwende ich Popstate?

Die neue HTML5-API erweitert window.history, um Verlaufspunkte offener zu machen. Sie können den aktuellen PushState des Verlaufspunkts speichern, den aktuellen ReplaceState des Verlaufspunkts ersetzen und den PopState des Verlaufspunkts abhören.

Die Verwendung von pushState und replaceState ist ähnlich.

Anwendung:

history.pushState(Daten,Titel,URL);
//Der erste Parameter „data“ ist der Wert von „state“. Der zweite Parameter „title“ ist der Titel der Seite, aber alle aktuellen Browser ignorieren diesen Parameter. Übergeben Sie daher einfach eine leere Zeichenfolge. Der dritte Parameter „url“ ist der Link, zu dem Sie gelangen möchten.

Die Verwendung von replaceState ist ähnlich, zum Beispiel: history.replaceState("首頁","",location.href+ "#news");

Zusammenfassen

Dies ist das Ende dieses Artikels über die Vue-Browser-Rückgabeüberwachung. Weitere relevante Inhalte zur Vue-Browser-Rückgabeüberwachung 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!