Vue がページを閉じる前にリクエストを送信する

Vue.js を使用して Web アプリケーションを構築する場合、多くの場合、状態をクリーンアップしたり、最後のリクエストを送信したりするために、いくつかの操作を実行する必要があります。シナリオの 1 つは、ユーザーがページを閉じたときに、現在の状態を保存するリクエストを送信するか、データが失われないようにクリーンアップ操作を実行する必要があるというものです。

従来の Web サイトでは、window.onbeforeunload イベントでいくつかの操作を実行できます。しかし、Vue.js では、ページ ナビゲーションに Vue Router を使用すると、ページが閉じられたときに Vue Router のナビゲーション フックのみがトリガーされ、window.onbeforeunload イベントはトリガーされません。では、ページを閉じる前にリクエストを送信するにはどうすればよいでしょうか?

Vue.js では、グローバル フロント ガードを登録することでルート ナビゲーションをリッスンできます。グローバル フロント ガードは、ルーティング ナビゲーションの前に呼び出される関数で、次の 3 つのパラメーターを受け入れることができます: to (これから入力するターゲット ルーティング オブジェクト)、from (現在のナビゲーションが出力しようとしているルーティング オブジェクト)、next (呼び出しこのメソッドで入力します) 次のフック)。

グローバル フロント ガードにフック関数を登録すると、ユーザーが現在のページから離れるとフック関数がトリガーされます。フック関数でリクエストを送信し、必要なアクションを実行できます。以下はサンプル コードです。

// 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),
});

上記のコード サンプルでは、​​グローバル フロント ガードを登録し、その中にフック関数を定義しました。このフック関数は、ユーザーが現在のページを離れるときにトリガーされます。フック関数で確認ボックスをポップアップ表示し、ページを閉じてもよいかどうかをユーザーに尋ねます。ユーザーがページを閉じることを確認した場合は、リクエストを送信してクリーンアップ操作を実行します。それ以外の場合は、ナビゲーションをキャンセルして現在のページに留まります。

次のフックに入るには、フック関数で next() メソッドを使用することに注意してください。 next() メソッドを呼び出さない場合、ナビゲーションは中断され、現在のページに留まります。

要約すると、Vue Router のグローバル フロント ガードにフック関数を登録することで、ページを閉じるイベントをリッスンできます。フック関数では、リクエストを送信し、必要なアクションを実行できます。このようにして、ユーザーがページを閉じたときにデータが失われないようにしながら、必要なクリーンアップ操作も実行します。

以上がVue がページを閉じる前にリクエストを送信するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。