Apabila penyemak imbas vue ditutup, ia menggesa sama ada untuk menutupnya

Apabila aplikasi satu halaman menjadi semakin popular, Vue, sebagai rangka kerja hadapan arus perdana, telah digunakan secara meluas. Walau bagaimanapun, adalah masalah yang lebih sukar untuk melaksanakan gesaan apabila penyemak imbas ditutup dalam aplikasi.

Biasanya, apabila penyemak imbas ditutup, pengguna mungkin tersilap mengendalikan atau menutup semua tab penyemak imbas. Pada masa ini, jika kami mempunyai data yang belum disimpan atau data lain yang perlu dibersihkan dalam aplikasi, ia akan menyebabkan beberapa masalah.

Untuk menyelesaikan masalah ini, kami perlu menambah lapisan gesaan pada aplikasi Vue Apabila pengguna cuba menutup tab penyemak imbas, mereka akan menerima gesaan yang bertanya sama ada mereka pasti akan menutupnya.

Vue menyediakan acara tutup penyemak imbas sebelum pemuatan, yang dicetuskan apabila penyemak imbas ditutup atau halaman dimuat semula. Kami boleh mendengar acara sebelum pemuatan halaman dalam fungsi kitaran hayat Vue:

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

Dalam kod di atas, kami menambah mendengar acara dalam fungsi yang dibuat Apabila penyemak imbas menutup atau menyegarkan halaman, fungsi handleBeforeunload akan dicetuskan. Dalam fungsi ini, kami menggunakan event.returnValue untuk mengembalikan maklumat gesaan untuk melaksanakan gesaan apabila aplikasi ditutup.

Perlu diambil perhatian bahawa jika aplikasi Vue kami mengawal acara penutupan penyemak imbas bersama-sama dengan skrip JS lain, konflik mungkin berlaku. Pada masa ini, penyelesaian yang lebih baik ialah menggunakan pengawal vue-router untuk mengawal gesaan penghalaan dengan lebih terperinci.

Dalam vue-router, kita boleh menggunakan pengawal beforeRouteLeave, yang dicetuskan sebelum laluan keluar. Kami boleh memutuskan sama ada untuk menggesa berdasarkan sama ada laluan semasa dan laluan sasaran sepadan dan sama ada pengguna telah melakukan operasi tertentu:

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

Dalam kod di atas, kami mula-mula menentukan sama ada terdapat data yang tidak disimpan (iaitu formDirty variable), jika wujud, paparkan kotak gesaan dan tentukan sama ada untuk meninggalkan halaman semasa mengikut pilihan pengguna. Jika ia tidak wujud, pergi terus ke laluan seterusnya.

Ringkasnya, sama ada kami menggunakan beforeunload dalam aplikasi Vue atau beforeRouteLeave dalam vue-router, kami boleh melaksanakan gesaan apabila penyemak imbas ditutup melalui kod mudah, yang meningkatkan pengalaman sambil mengelakkan kehilangan data atau soalan lain.

Atas ialah kandungan terperinci Apabila penyemak imbas vue ditutup, ia menggesa sama ada untuk menutupnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!