Bagaimana untuk menyelesaikan masalah "NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa" apabila menggunakan vue-router dalam aplikasi Vue?

Vue.js ialah rangka kerja JavaScript yang popular. Ia menyediakan banyak ciri dan alatan untuk membina aplikasi web satu halaman. Vue-router ialah alat pengurusan penghalaan yang biasa digunakan dalam Vue.js. Ia membantu kami melaksanakan penghalaan dalam Aplikasi Halaman Tunggal (SPA).

Walau bagaimanapun, apabila menggunakan vue-router, anda mungkin menghadapi ralat "NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa". Masalah ini biasanya berlaku apabila pengguna mengklik pada laluan penghalaan berulang kali. Dalam kes ini, vue-router akan menggesa "Elakkan akses berulang ke lokasi semasa".

Mengapa ralat ini berlaku? Ini kerana vue-router mengesan bahawa pengguna berulang kali mengakses alamat yang sama, yang boleh menyebabkan masalah semasa memuatkan komponen halaman. Oleh itu, pengawal navigasi dalam vue-router akan menghentikan pemuatan halaman untuk mengelakkan navigasi berulang.

Jadi, bagaimana untuk menyelesaikan masalah ini?

1. Lumpuhkan pengawal navigasi

Kaedah pertama adalah untuk melumpuhkan pengawal navigasi dalam vue-router. Pendekatan ini mungkin memecahkan cara kami mengurus laluan, kerana pengawal navigasi ialah ciri yang sangat berkuasa yang boleh membantu kami bertukar antara laluan yang berbeza dan mengurus status laluan, kebenaran, dsb. Walau bagaimanapun, dalam sesetengah senario, melumpuhkan pengawal navigasi boleh menjadi cara yang berkesan untuk menyelesaikan masalah.

Untuk melumpuhkan pengawal navigasi, kita hanya perlu mengalih keluarnya dalam konfigurasi penghalaan:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

2. Penyelesaian

Kaedah kedua ialah menyelesaikan masalah ini sambil mengekalkan fungsi pengawal navigasi. Terdapat dua penyelesaian:

1. Gunakan kaedah tangkapan

Kaedah tangkapan adalah kaedah yang disediakan oleh vue-router Semasa pelaksanaan pengawal navigasi, jika ralat berlaku, kaedah tangkapan akan dipanggil. Kita boleh mengembalikan nilai palsu dalam kaedah tangkapan untuk mengelakkan melompat kembali ke halaman semasa.

router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    next(false)
  } else {
    next()
  }
})

Dengan cara ini, kita boleh mengelakkan navigasi berulang jika pengguna melawat alamat yang sama berulang kali.

2. Gunakan kaedah ganti

Kaedah gantian adalah penyelesaian yang lebih baik. Kaedah ini boleh mengubah hala ke alamat yang sama tanpa mencetuskan pengawal navigasi. Kami hanya perlu menggunakan kaedah ganti dalam kaedah lompat laluan untuk mengelakkan navigasi berulang.

this.$router.replace(to)

Dengan cara ini, setiap kali pengguna mengklik untuk melompat ke laluan yang sama, laluan semasa akan digantikan dengan laluan baharu tanpa memuatkan komponen pendua. Ini mengelakkan masalah dengan pengawal navigasi.

Ralat "NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa" adalah masalah yang sangat biasa apabila menggunakan vue-router dalam aplikasi Vue. Kita boleh memilih untuk melumpuhkan pengawal navigasi, menggunakan kaedah tangkapan atau menggunakan kaedah ganti untuk menyelesaikan masalah ini mengikut keperluan kita.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah "NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa" apabila menggunakan vue-router dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!