Saya mengalami ralat vue-router "NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa" dalam aplikasi Vue saya - bagaimana untuk menyelesaikannya?

Saya mengalami ralat vue-router "NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa" dalam aplikasi Vue - bagaimana untuk menyelesaikannya?

Vue.js menjadi semakin popular dalam pembangunan aplikasi bahagian hadapan sebagai rangka kerja JavaScript yang pantas dan fleksibel. Penghala Vue ialah perpustakaan kod Vue.js yang digunakan untuk pengurusan penghalaan. Walau bagaimanapun, kadangkala menghadapi ralat "NavigationDuplicated" dalam aplikasi Vue boleh menyebabkan kesukaran menggunakan Penghala Vue. Artikel ini menerangkan cara menyelesaikan ralat ini.

Dalam Penghala Vue, apabila kita bertukar antara laluan penghalaan yang sama beberapa kali, kita akan menghadapi ralat "NavigationDuplicated". Contohnya, jika pengguna mengklik pautan navigasi yang sama beberapa kali, mereka akan melihat ralat ini pada konsol.

Mesej ralat biasanya kelihatan seperti berikut:

"NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa: "/your-route-path"

Mesej ralat ini memberitahu kami bahawa lompatan penghalaan halaman dibuat beberapa kali pada url yang sama alamat tidak dibenarkan. Punca masalah ini ialah Vue Router memastikan navigasi laluan yang betul Jika laluan laluan adalah sama dan parameter adalah sama, laluan ini akan dianggap sebagai laluan yang sama

, kami. Kami akan memperkenalkan beberapa cara untuk menyelesaikan ralat "NavigationDuplicated"

Kaedah 1: Menggunakan fungsi tangkapan

Kami boleh membungkus navigasi laluan dengan pernyataan cuba-tangkap untuk memastikan kami boleh menggunakan fungsi tangkapan. ralat ini dan mengendalikannya dengan sewajarnya

try {
   await this.$router.push(myRoute)
} catch (err) {
   if(err.name !== 'NavigationDuplicated') {
      throw err
   }
}

Dalam coretan kod ini, kami menggunakan pernyataan cuba-tangkap untuk membungkus kod navigasi ke laluan Dalam blok kod cuba, kami akan menavigasi ke laluan yang ditentukan melalui $router. push(), yang akan menyebabkan "NavigationDuplicated". Dalam blok kod tangkapan, jika ralat bukan "NavigationDuplicated", kami akan membuang semula ralat ini Jika ralat "NavigationDuplicated", tiada tindakan lain akan dilakukan . Sudah tentu, ini hanya satu cara untuk menyelesaikan masalah , anda perlu membuat panggilan yang sesuai di tempat yang betul

Kaedah 2: Abaikan laluan pendua

Terdapat sifat dalam Vue Router yang dipanggil "ignoreDuplicates". ia ditetapkan kepada benar, anda boleh mengabaikan laluan pendua dalam Vue

export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes,
   ignoreDuplicates: true,
})

Dalam coretan kod ini, kami menetapkan sifat ignoreDuplicates kepada benar, yang bermaksud bahawa jika laluan yang sama dilayari berulang kali, Penghala Vue akan mengabaikannya

Ini ialah. cara yang mudah. ​​Penyelesaiannya boleh menjimatkan jumlah kod, tetapi kaedah ini boleh menyebabkan kehilangan laluan atau masalah lain, jadi ia perlu digunakan dengan berhati-hati

Kaedah 3: Gunakan cangkuk Vue Router

Vue Router mempunyai beberapa. fungsi cangkuk kitaran hayat yang boleh digunakan dalam navigasi laluan Jalankan kaedah tersuai apabila perubahan berlaku . URL adalah sama dengan URL laluan semasa, kami akan menghalang Vue Router daripada menavigasi ke laluan baharu. Dengan cara ini anda boleh mengelakkan ralat NavigationDuplicated.

Ini ialah penyelesaian ringkas dan elegan yang boleh menyelesaikan ralat "NavigationDuplicated" yang berlaku semasa penghalaan dengan berkesan.

Dapat dilihat bahawa ralat "NavigationDuplicated" pada Penghala Vue mungkin merupakan salah satu ralat biasa yang dihadapi dalam pembangunan aplikasi Vue.js. Nasib baik, kami boleh menyelesaikan masalah ini dalam beberapa cara yang mudah tetapi berkesan untuk memberikan pengalaman yang lebih baik untuk pengguna aplikasi Vue.js.

Atas ialah kandungan terperinci Saya mengalami ralat vue-router "NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa" dalam aplikasi Vue saya - bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!