Mengapa router.beforeEach dalam vue pergi dua kali?

Dalam Vue, router.beforeEach boleh dilaksanakan dua kali kerana sebab berikut: 1. Tertib navigasi yang salah 2. Pengawal laluan berbilang 3. Perubahan storan Vuex. Untuk mengelakkan ini, elakkan melakukan navigasi dalam beforeEach, gabungkan berbilang pengawal laluan dan gunakan jam tangan untuk mendengar perubahan storan Vuex.

Mengapakah router.beforeEach dalam Vue pergi dua kali? router.beforeEach 会走两次？

router.beforeEach 是 Vue Router 中的一个钩子函数，它会在路由导航发生之前触发。一般情况下，它只会被触发一次，但在某些特定情况下，它可能会被触发两次。

可能的原因：

• 错误的导航顺序：如果在 beforeEach 钩子函数内部执行了路由导航，则该钩子函数将再次触发。这是因为路由导航是一个异步过程，在它完成之前，beforeEach 钩子函数可能已经被执行了。
• 多个路由守卫：如果有多个路由守卫（global 和 per-route）注册了 beforeEach 钩子函数，则它们都会被触发。这可能会导致重复的逻辑或意外行为。
• Vuex 存储变更：如果 beforeEach 钩子函数依赖于 Vuex 存储的状态，并且在导航期间触发了状态变更，则该钩子函数可能会被再次触发。这是因为 Vuex 存储变更会触发组件重新渲染，这反过来又会导致路由导航。

如何避免：

为了避免 router.beforeEach 触发两次，可以采取以下措施：

• 避免在 beforeEach 钩子函数中执行路由导航：如果需要在 beforeEach 钩子函数中执行路由导航，请使用 next() 回调来延迟导航，直到当前导航完成。
• 合并多个路由守卫：如果有多个路由守卫需要注册 beforeEach 钩子函数，请考虑将它们合并为一个函数。
• 使用 watch 监听 Vuex 存储变更：如果 beforeEach 钩子函数依赖于 Vuex 存储的状态，请使用 Vuex 的 watch() 函数来监听状态变更，而不是在导航期间触发状态变更。

结论：

router.beforeEach 在 Vue 中触发两次通常是由于错误的导航顺序、多个路由守卫或 Vuex 存储变更。通过遵循上述措施，可以避免这种情况，确保 beforeEach

router.beforeEach ialah fungsi cangkuk dalam Vue Router yang akan dicetuskan sebelum navigasi laluan berlaku. Biasanya ia hanya akan dicetuskan sekali, tetapi dalam beberapa kes tertentu ia mungkin dicetuskan dua kali. 🎜🎜🎜Punca yang mungkin: 🎜

• 🎜Tertib navigasi yang salah: Jika navigasi laluan dilakukan di dalam fungsi cangkuk beforeEach, fungsi cangkuk akan dicetuskan semula . Ini kerana navigasi laluan ialah proses tak segerak dan fungsi cangkuk beforeEach mungkin telah dilaksanakan sebelum ia selesai.
• 🎜Berbilang pengawal laluan: Jika terdapat berbilang pengawal laluan (global dan setiap laluan) yang didaftarkan dengan fungsi cangkuk beforeEach, semuanya akan dicetuskan. Ini boleh membawa kepada logik pendua atau tingkah laku yang tidak dijangka.
• 🎜Perubahan Storan Vuex: Jika fungsi cangkuk beforeEach bergantung pada keadaan disimpan Vuex dan perubahan keadaan dicetuskan semasa navigasi, fungsi cangkuk mungkin Dicetuskan semula . Ini kerana perubahan storan Vuex mencetuskan pemaparan semula komponen, yang seterusnya menyebabkan navigasi laluan.

🎜🎜Cara mengelakkan: 🎜🎜Untuk mengelakkan router.beforeEach mencetuskan dua kali, anda boleh mengambil langkah berikut: 🎜

• 🎜Elakkan dalam Laksanakan navigasi laluan dalam fungsi cangkuk beforeEach: Jika anda perlu melaksanakan navigasi laluan dalam fungsi cangkuk beforeEach, sila gunakan next() panggil balik untuk menangguhkan navigasi sehingga navigasi semasa selesai.
• 🎜Gabungkan berbilang pengawal laluan: Jika terdapat berbilang pengawal laluan yang perlu mendaftarkan fungsi cangkuk beforeEach, sila pertimbangkan untuk menggabungkannya menjadi satu fungsi.
• 🎜Gunakan jam tangan untuk memantau perubahan storan Vuex: Jika fungsi cangkuk beforeEach bergantung pada keadaan storan Vuex, sila gunakan watch() berfungsi untuk mendengar perubahan keadaan dan bukannya mencetuskan perubahan keadaan semasa navigasi.

🎜🎜Kesimpulan: 🎜🎜router.beforeEach menembak dua kali dalam Vue biasanya disebabkan oleh susunan navigasi yang salah, pengawal berbilang laluan atau perubahan storan Vuex . Dengan mengikuti langkah di atas, anda boleh mengelakkan situasi ini dan memastikan fungsi cangkuk beforeEach dijalankan seperti yang diharapkan. 🎜

Atas ialah kandungan terperinci Mengapa router.beforeEach dalam vue pergi dua kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!