Wenn der Vue-Browser geschlossen wird, werden Sie gefragt, ob er geschlossen werden soll

Da Single-Page-Anwendungen immer beliebter werden, ist Vue als Mainstream-Front-End-Framework weit verbreitet. Schwieriger ist jedoch die Implementierung von Eingabeaufforderungen beim Schließen des Browsers in der Anwendung.

Normalerweise ist es wahrscheinlich, dass Benutzer beim Schließen des Browsers versehentlich alle Browser-Registerkarten bedienen oder schließen. Wenn wir zu diesem Zeitpunkt nicht gespeicherte Daten oder andere Daten in der Anwendung haben, die bereinigt werden müssen, kann dies zu Problemen führen.

Um dieses Problem zu lösen, müssen wir der Vue-Anwendung eine Eingabeaufforderungsebene hinzufügen. Wenn der Benutzer versucht, den Browser-Tab zu schließen, wird er gefragt, ob er ihn wirklich schließen möchte.

Vue stellt das Browser-Schließereignis beforeunload bereit, das ausgelöst wird, wenn der Browser geschlossen oder die Seite aktualisiert wird. Wir können das Beforeunload-Ereignis der Seite in der Lebenszyklusfunktion von Vue abhören:

created() {
  window.addEventListener('beforeunload', this.handleBeforeunload)
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeunload)
},
methods: {
  handleBeforeunload(event) {
    event.returnValue = '您确定要关闭该页面吗？'
  }
}

Im obigen Code fügen wir das Ereignisabhören in der erstellten Funktion hinzu. Wenn der Browser die Seite schließt oder aktualisiert, wird die Funktion handleBeforeunload ausgelöst. In dieser Funktion verwenden wir event.returnValue, um die Eingabeaufforderungsinformationen zurückzugeben und die Eingabeaufforderung zu implementieren, wenn die Anwendung geschlossen wird.

Es ist zu beachten, dass es zu Konflikten kommen kann, wenn unsere Vue-Anwendung das Browser-Schließereignis zusammen mit anderen JS-Skripten steuert. Derzeit besteht eine bessere Lösung darin, Vue-Router Guard zu verwenden, um Routing-Eingabeaufforderungen detaillierter zu steuern.

Im Vue-Router können wir den beforeRouteLeave-Guard verwenden, der ausgelöst wird, bevor die Route verlässt. Wir können entscheiden, ob eine Eingabeaufforderung angezeigt wird, basierend darauf, ob die aktuelle Route und die Zielroute übereinstimmen und ob der Benutzer bestimmte Vorgänge ausgeführt hat:

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您确定要离开该页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

Im obigen Code ermitteln wir zunächst, ob nicht gespeicherte Daten vorhanden sind (d. h. die formDirty-Variable) und Wenn dies der Fall ist, wird ein Eingabeaufforderungsfeld angezeigt und der Benutzer entscheidet anhand seiner Auswahl, ob er die aktuelle Seite verlassen möchte. Wenn es nicht vorhanden ist, gehen Sie direkt zur nächsten Route.

Kurz gesagt: Unabhängig davon, ob wir beforeunload in einer Vue-Anwendung oder beforeRouteLeave im Vue-Router verwenden, können wir durch einfachen Code Eingabeaufforderungen implementieren, wenn der Browser geschlossen wird, was das Erlebnis verbessert und gleichzeitig Datenverluste oder andere Probleme vermeidet.

Das obige ist der detaillierte Inhalt vonWenn der Vue-Browser geschlossen wird, werden Sie gefragt, ob er geschlossen werden soll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!