Cara melaksanakan sejarah pembatalan lompatan dalam Penghala Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan aplikasi web. Vue Router ialah perpustakaan penghala rasmi untuk Vue, yang sangat berguna apabila membina aplikasi satu halaman. Penghala Vue memudahkan pembangun mengurus keadaan aplikasi dan navigasi. Penghala Vue juga menyediakan ciri seperti penghalaan dinamik dan penghalaan bersarang untuk membantu pembangun mengurus asas kod dengan lebih baik.

Apabila menggunakan Penghala Vue, keperluan yang sangat biasa ialah melaksanakan lonjakan halaman dalam senario seperti tapak web e-dagang. Dalam kes ini, selepas pengguna melakukan beberapa operasi, dia melompat ke halaman lain. Tetapi kaedah lompat ini mungkin menyebabkan beberapa masalah kepada pengguna. Sebagai contoh, apabila pengguna kembali ke halaman sebelumnya, produk yang diklik akan dimuatkan semula. Ini boleh menyebabkan kekeliruan dan kegusaran pengguna. Oleh itu, membatalkan sejarah lompatan adalah penyelesaian yang baik.

Jadi, bagaimana untuk melaksanakan sejarah pembatalan lompatan dalam Penghala Vue? Di bawah, kami akan menyediakan beberapa penyelesaian.

Kaedah 1: Gunakan kaedah ganti Vue Router

Vue Router membenarkan pembangun menggunakan kaedah ganti dan bukannya kaedah tolak lalai untuk menukar laluan. Kaedah ini boleh digunakan untuk membatalkan sejarah.

Berikut ialah contoh:

router.replace('/path-to-url');

Kaedah ini akan menggantikan laluan semasa dengan laluan yang diberikan tanpa membuat entri baharu dalam sejarah penyemak imbas. Ini bermakna pengguna tidak boleh kembali ke halaman sebelumnya, sekali gus menyelesaikan masalah muat semula halaman apabila kembali.

Kaedah 2: Gunakan kaedah beforeRouteLeave dan scrollBehavior Vue Router

Vue Router menyediakan dua kaedah beforeRouteLeave dan scrollBehavior, yang boleh digunakan dalam kombinasi untuk melaksanakan sejarah pembatalan.

Kaedah beforeRouteLeave ialah cangkuk kitaran hayat dalam Penghala Vue, yang dicetuskan apabila komponen meninggalkan laluan. Oleh itu, ia boleh digunakan untuk mengatasi tingkah laku penghalaan lalai. Dalam kaedah beforeRouteLeave, anda boleh menggunakan kaedah scrollBehavior untuk menetapkan sama ada penyemak imbas boleh kembali dalam mod sejarah melalui objek scrollBehavior. Jika sifat 'scrollBehavior' ditetapkan dalam objek yang dikembalikan dalam kaedah scrollBehavior, tingkah laku menatal yang sepadan akan dilakukan apabila butang belakang penyemak imbas diklik dalam mod sejarah.

Berikut ialah contoh:

beforeRouteLeave(to, from, next) {
  this.$router.replace(to.path)
  next(false);
},
scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

Dalam contoh ini, kami menggunakan kaedah beforeRouteLeave untuk mengatasi kelakuan penghalaan lalai dan menggunakan kaedah this.$router.replace untuk menggantikan kaedah lalai kaedah tolak. Alternatif ini tidak menambah entri baharu pada sejarah, sekali gus menghalang halaman daripada memuat semula apabila pengguna berundur. Kaedah scrollBehavior digunakan untuk menetapkan sama ada penyemak imbas boleh melancarkan semula.

Kaedah 3: Gunakan mod sejarah Vue Router

Vue Router juga menyediakan mod sejarah, yang boleh digunakan untuk membatalkan sejarah.

Berikut ialah contoh:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Dalam contoh ini, kami menetapkan mod Penghala Vue kepada sejarah. Mod ini adalah berdasarkan API sejarah HTML5, yang menyimpan maklumat penghalaan dalam objek sejarah penyemak imbas dan bukannya dalam rentetan pertanyaan bar alamat. Ini bermakna dalam mod sejarah, pengguna boleh memasukkan dan mengubah suai URL terus dalam bar alamat tanpa perlu risau tentang masalah dalam sejarah.

Ringkasan

Vue Router ialah perpustakaan penghala yang disediakan secara rasmi oleh Vue, yang menyediakan beberapa fungsi yang sangat berguna. Apabila ia datang untuk melaksanakan lompatan halaman, membatalkan sejarah lompatan adalah keperluan yang sangat penting. Dalam artikel ini, kami memperkenalkan tiga cara untuk membatalkan sejarah lompatan. Menggunakan kaedah ini, pembangun boleh mengurus keadaan dan navigasi aplikasi dengan lebih baik serta meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Cara melaksanakan sejarah pembatalan lompatan dalam Penghala Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!