Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Projektanforderungen: Ich habe auch viele ähnliche Artikel im Internet gefunden, aber es gibt einige Probleme bei der Verwendung. Schließlich muss es Ihren eigenen Anforderungen entsprechen. Ich verwende hier vue3, aber theoretisch kann auch vue2 verwendet werden. Die von mir beschriebene Methode ist universell.

Diese Methoden werden alle basierend auf beforeunload und unload ausgeführt.
Unten habe ich im Rookie-Tutorial und auf MDN nach der Einführung der beiden Ereignisse gesucht, Sie können es selbst herausfinden.

1. beforeunload-Ereignis

1.1, Tutorial für Anfänger:

Bildbeschreibung hier einfügen

1.2. MDN

Bildbeschreibung hier einfügen

2. Ereignis entladen

2.1 、 Tutorial für Anfänger

Bildbeschreibung hier einfügen

2.2. MDN

Bildbeschreibung hier einfügen
MDN: Generell empfehlen wir, window.addEventListener() zu verwenden, um auf das Unload-Ereignis (en-US) zu warten, anstatt onunload direkt einen Wert zuzuweisen.

Der von mir verwendete Quellcode ist unten aufgeführt.

3. Quellcode

3.1. Methode 1: Kann in HTML-Seite geschrieben werden (direkte Verwendung)

      var _beforeUnload_time = 0, _gap_time = 0;
      window.onunload = Funktion (){
          _gap_time = neues Date().getTime() - _beforeUnload_time;
          if(_gap_time <= 10) {//Browser schließen window.mgr.signoutRedirect();//Dieser Manager ist die Abmeldemethode, die ich im Fenster angezeigt habe}else{//Browser aktualisieren – Chrome aktualisieren console.log(document.domain);
              return confirm("Möchten Sie dieses System wirklich verlassen?");
          }
      };
      window.onbeforeunload = Funktion (){
          _beforeUnload_time = neues Date().getTime();
      };

3.2. Methode 2: Kann in Komponenten wie app.vue geschrieben werden (Abhören von Ereignissen)

  Daten() {
    zurückkehren {
      Lückenzeit: 0,
      vorEntladezeit: 0,
    };
  },
  Methoden: {
    //Vor dem Schließen des Fensters ausführen beforeunloadHandler() {
      this.beforeUnload_time = neues Date().getTime();
    },
    entladenHandler() {
      this.gap_time = neues Date().getTime() - this.beforeUnload_time;
      // Beurteilen Sie, ob das Fenster in Millisekunden geschlossen oder aktualisiert wird. Die meisten Online-Messwerte sind 5
      wenn (diese.Lückenzeit <= 10) {
        mgr.signoutRedirect(); // Die Abmeldeschnittstelle sollte durch eine persönliche Abmeldemethode ersetzt werden} else {
        Konsole.log(Dokument.Domäne);
        return confirm("Möchten Sie dieses System wirklich verlassen?");
      }
    },
  },
  unmounted() {//vue kann durch den Lebenszyklus von destroy() ersetzt werden, aber dies kann auch verwendet werden // Entfernen Sie den Listener window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
    window.removeEventListener("entladen", () => this.unloadHandler());
  },
  montiert() {
    // Auf das Schließen des Browsers warten window.addEventListener("beforeunload", () => this.beforeunloadHandler());
    window.addEventListener("entladen", () => this.unloadHandler());
  },

Referenzartikel:
Wenn Vue den Browser schließt, wird ein Ereignis ausgelöst und die Abmeldeschnittstelle ausgeführt. Vue schließt den Browser und löscht das Token (Unterscheidung zwischen Aktualisierungen).

Dies ist das Ende dieses Artikels über die Implementierung des Schließens des Browsers und des Abmeldens in Vue. Weitere relevante Vue-Inhalte zum Schließen des Browsers und zum Abmelden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • js behandelt die Kontoabmeldung beim Schließen des Browsers

<<:  Detaillierte Erklärung der englischen Namen, die der Schriftfamilie chinesischer Schriftarten in CSS-Stilen entsprechen

>>:  Analyse des Prinzips und der Funktion der MySQL-Datenbank-Master-Slave-Replikation

Artikel empfehlen

Lösen Sie das Problem der verstümmelten Zeichen im Tomcat10 Catalina-Protokoll

Laufumgebung, Idea2020-Version, Tomcat10, beim Au...

Lösung für das Problem von var in einer for-Schleife

Vorwort var ist eine Möglichkeit, Variablen in ES...

Vue realisiert Preiskalendereffekt

In diesem Artikelbeispiel wird der spezifische Co...

Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

Enctype: Gibt den Kodierungstyp an, der vom Browse...

Detaillierte Erklärung der reinen SQL-Anweisungsmethode basierend auf JPQL

JPQL steht für Java Persistence Query Language. B...

Wissen Sie, wie Sie mit Vue Screenshots von Webseiten erstellen?

Inhaltsverzeichnis 1. Installieren Sie html2Canva...

Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?

Als Softwareentwickler müssen Sie über ein vollst...

Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung

In Kombination mit dem Szenario in diesem Artikel...

Docker-Fallanalyse: Erstellen eines Redis-Dienstes

Inhaltsverzeichnis 1 Mount-Verzeichnisse und Date...

Eine kurze Analyse des HTML-Space-Codes

Wie gut kennen Sie sich mit HTML aus? Wenn Sie jet...

Das WeChat-Applet wählt die Bildsteuerung

In diesem Artikelbeispiel wird der spezifische Co...