Hantar permintaan sebelum Vue menutup halaman

Apabila membina aplikasi web dengan Vue.js, kami selalunya perlu melakukan beberapa operasi untuk membersihkan keadaan atau menghantar beberapa permintaan terakhir. Salah satu senario ialah apabila pengguna menutup halaman, kami perlu menghantar permintaan untuk menyimpan keadaan semasa atau melakukan beberapa operasi pembersihan untuk memastikan data tidak hilang.

Dalam tapak web tradisional, kami boleh melakukan beberapa operasi dalam acara window.onbeforeunload. Tetapi dalam Vue.js, apabila kami menggunakan Vue Router untuk navigasi halaman, hanya cangkuk navigasi Vue Router akan dicetuskan apabila halaman ditutup, tetapi acara window.onbeforeunload tidak akan dicetuskan. Jadi, bagaimana untuk menghantar permintaan sebelum menutup halaman?

Dalam Vue.js, kita boleh mendengar navigasi laluan dengan mendaftarkan pengawal hadapan global. Pengawal hadapan global ialah fungsi yang dipanggil sebelum navigasi penghalaan dan boleh menerima tiga parameter: ke (objek penghalaan sasaran yang akan masuk), daripada (objek penghalaan yang akan ditinggalkan oleh navigasi semasa), seterusnya (panggil kaedah ini untuk masuk) cangkuk seterusnya).

Kami boleh mendaftarkan fungsi cangkuk dalam pengawal hadapan global, yang akan dicetuskan apabila pengguna meninggalkan halaman semasa. Kami boleh menghantar permintaan dalam fungsi cangkuk dan melakukan tindakan yang kami perlukan. Berikut ialah contoh kod:

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

Dalam sampel kod di atas, kami mendaftarkan pengawal hadapan global dan menentukan fungsi cangkuk di dalamnya. Fungsi cangkuk ini akan dicetuskan apabila pengguna meninggalkan halaman semasa. Kami muncul kotak pengesahan dalam fungsi cangkuk untuk bertanya kepada pengguna sama ada mereka pasti mahu menutup halaman. Jika pengguna mengesahkan bahawa mereka mahu menutup halaman, hantar permintaan dan lakukan operasi pembersihan jika tidak, batalkan navigasi dan kekal di halaman semasa.

Perlu diingatkan bahawa kami menggunakan kaedah next() dalam fungsi cangkuk untuk memasuki cangkuk seterusnya. Jika kami tidak memanggil kaedah seterusnya(), navigasi akan terganggu dan kekal pada halaman semasa.

Untuk meringkaskan, kita boleh mendengar acara penutupan halaman dengan mendaftarkan fungsi cangkuk dalam pengawal hadapan global Vue Router. Dalam fungsi cangkuk, kami boleh menghantar permintaan dan melakukan tindakan yang kami perlukan. Dengan cara ini kami memastikan bahawa data tidak hilang apabila pengguna menutup halaman, sambil turut melakukan beberapa operasi pembersihan yang diperlukan.

Atas ialah kandungan terperinci Hantar permintaan sebelum Vue menutup halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!