vue의 router.beforeEach가 두 번 진행되는 이유는 무엇입니까?

Vue에서는 다음과 같은 이유로 router.beforeEach가 두 번 실행될 수 있습니다. 1. 잘못된 탐색 순서 2. 여러 라우팅 가드 3. Vuex 저장소 변경. 이를 방지하려면 beforeEach에서 탐색을 수행하지 말고, 여러 경로 가드를 병합하고, 시계를 사용하여 Vuex 스토리지 변경 사항을 수신하세요.

Vue의 router.beforeEach가 두 번 진행되는 이유는 무엇인가요? 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는 경로 탐색이 발생하기 전에 트리거되는 Vue Router의 후크 기능입니다. 일반적으로 한 번만 실행되지만 특정 경우에는 두 번 실행될 수도 있습니다. 🎜🎜🎜가능한 원인: 🎜

• 🎜잘못된 탐색 순서: 경로 탐색이 beforeEach 후크 함수 내에서 수행되면 후크 기능이 실행됩니다. 다시. 이는 경로 탐색이 비동기 프로세스이고 beforeEach 후크 기능이 완료되기 전에 실행되었을 수 있기 때문입니다.
• 🎜다중 경로 가드: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!