vue中的router.beforeEach為什麼要走兩次

Vue 中 router.beforeEach 可能走兩次，原因有：1. 錯誤的導航順序；2. 多個路由守衛；3. Vuex 儲存變更。為了避免這種情況，應避免在 beforeEach 中執行導航，合併多個路由守衛，並使用 watch 監聽 Vuex 儲存變更。

為什麼 Vue 中的 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 鉤子函數按預期執行。

以上是vue中的router.beforeEach為什麼要走兩次的詳細內容。更多資訊請關注PHP中文網其他相關文章！