Vue sendet eine Anfrage, bevor die Seite geschlossen wird

Beim Erstellen von Webanwendungen mit Vue.js müssen wir häufig einige Vorgänge ausführen, um den Status zu bereinigen oder einige letzte Anfragen zu senden. Eines der Szenarien besteht darin, dass wir beim Schließen der Seite durch den Benutzer eine Anfrage zum Speichern des aktuellen Status senden oder einige Bereinigungsvorgänge durchführen müssen, um sicherzustellen, dass die Daten nicht verloren gehen.

Auf einer herkömmlichen Website können wir einige Vorgänge im window.onbeforeunload-Ereignis ausführen. Wenn wir in Vue.js jedoch Vue Router für die Seitennavigation verwenden, wird beim Schließen der Seite nur der Navigations-Hook des Vue Routers ausgelöst, das Ereignis window.onbeforeunload wird jedoch nicht ausgelöst. Wie kann ich also eine Anfrage senden, bevor ich die Seite schließe?

In Vue.js können wir die Routennavigation überwachen, indem wir einen globalen Frontwächter registrieren. Der globale Frontschutz ist eine Funktion, die vor dem Routing der Navigation aufgerufen wird und drei Parameter akzeptieren kann: to (das Ziel-Routing-Objekt, das gerade betreten wird), from (das Routing-Objekt, das die aktuelle Navigation verlassen wird), next (call diese Methode eingeben) nächster Haken).

Wir können im globalen Frontschutz eine Hook-Funktion registrieren, die ausgelöst wird, wenn der Benutzer die aktuelle Seite verlässt. Wir können die Anfrage in der Hook-Funktion senden und die erforderlichen Aktionen ausführen. Hier ist ein Beispielcode:

// main.js
import Vue from 'vue';
import App from './App';
import router from './router';

router.beforeEach((to, from, next) => {
  const answer = window.confirm("确定要关闭页面吗？");
  if (answer) {
    // 发送请求并执行清理操作
    // do something...
    next();
  } else {
    next(false);
  }
});

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

Im obigen Codebeispiel haben wir einen globalen Frontschutz registriert und darin eine Hook-Funktion definiert. Diese Hook-Funktion wird ausgelöst, wenn der Benutzer die aktuelle Seite verlässt. Wir blenden in der Hook-Funktion ein Bestätigungsfeld ein, um den Benutzer zu fragen, ob er die Seite wirklich schließen möchte. Wenn der Benutzer bestätigt, dass er die Seite schließen möchte, senden Sie eine Anfrage und führen Sie Bereinigungsvorgänge durch; andernfalls brechen Sie die Navigation ab und bleiben Sie auf der aktuellen Seite.

Es ist zu beachten, dass wir die next()-Methode in der Hook-Funktion verwenden, um den nächsten Hook einzugeben. Wenn wir die Methode next() nicht aufrufen, wird die Navigation unterbrochen und bleibt auf der aktuellen Seite.

Zusammenfassend können wir das Ereignis zum Schließen der Seite abhören, indem wir eine Hook-Funktion im globalen Frontschutz von Vue Router registrieren. Innerhalb der Hook-Funktion können wir die Anfrage senden und die von uns benötigten Aktionen ausführen. Auf diese Weise stellen wir sicher, dass keine Daten verloren gehen, wenn der Benutzer die Seite schließt, und führen gleichzeitig einige notwendige Bereinigungsvorgänge durch.

Das obige ist der detaillierte Inhalt vonVue sendet eine Anfrage, bevor die Seite geschlossen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!