Lumpuhkan halaman seterusnya Vue3 dan fungsi halaman sebelumnya, yang terhad kepada penyemak imbas di bawah laluan penghalaan yang sama.

Question

Hari ini saya menghadapi masalah dan saya perlukan nasihat.

Saya mempunyai struktur halaman penghalaan seperti ini {url}/:id. Matlamat saya adalah untuk menghalang pengguna daripada menavigasi ke halaman sebelumnya dan seterusnya dalam laluan yang sama, contohnya dari {url}/1 ke {url}/2. Saya membuat panggilan API untuk menukar data pada halaman dan URL berubah dengan sewajarnya.

Walau bagaimanapun, saya mahu pengguna dapat menavigasi ke halaman sebelum atau selepas {url}/:id, tetapi tidak dalam {url}/:id.

Bolehkah anda memberikan sebarang penyelesaian atau cadangan? Saya pernah mendengar bahawa pengawal navigasi mungkin membantu, tetapi saya mengalami kesukaran untuk memahaminya pada mulanya.

Terima kasih terlebih dahulu atas bantuan anda!

---

Maaf, penjelasannya tidak jelas, saya memerlukan penyemak imbas untuk ingat bahawa halaman sebelumnya atau halaman seterusnya adalah halaman lain, seperti {url}/lists atau {url}/news, tetapi tidak ingat halaman penghalaan yang sama, jadi dalam pelayar Selepas mengklik butang, anda tidak akan memasuki halaman penghalaan yang sama...

Answer 1

Saya dapat tahu

this.$router.replace({ path: '/your-route' });

bukannya

router.push

Menyelesaikan masalah saya.

Answer 2

Berikut ialah contoh lanjutan menggunakan Penghala Vue:

router.beforeEach((to, from, next) => {
  if (to.params.id && from.params.id) {
    if (to.params.id !== from.params.id) {
      next(); // 允许在路由内导航到下一页
    } else {
      next(false); // 阻止在路由内导航到同一页
    }
  } else {
    next(); // 允许导航到其他路由
  }
});