Pourquoi router.beforeEach dans vue va-t-il deux fois ?

Dans Vue, router.beforeEach peut être exécuté deux fois pour les raisons suivantes : 1. Mauvais ordre de navigation 2. Plusieurs gardes de routage 3. Modifications du stockage Vuex ; Pour éviter cela, évitez d'effectuer une navigation dans beforeEach, fusionnez plusieurs gardes d'itinéraire et utilisez des montres pour écouter les modifications de stockage Vuex.

Pourquoi router.beforeEach dans Vue va-t-il deux fois ? 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 est une fonction de hook dans Vue Router qui sera déclenchée avant la navigation sur l'itinéraire. Normalement, il ne sera déclenché qu’une seule fois, mais dans certains cas spécifiques, il pourra être déclenché deux fois. 🎜🎜🎜Causes possibles : 🎜

• 🎜Ordre de navigation incorrect : Si la navigation par itinéraire est effectuée à l'intérieur de la fonction hook beforeEach, alors la fonction hook se déclenchera encore. En effet, la navigation par itinéraire est un processus asynchrone et la fonction hook beforeEach peut avoir été exécutée avant sa fin.
• 🎜Plusieurs gardes de route : S'il y a plusieurs gardes de route (globaux et par route) enregistrés avec la fonction de hook beforeEach, ils seront tous déclenchés. Cela peut conduire à une logique en double ou à un comportement inattendu.
• 🎜Changements de stockage Vuex : Si la fonction hook beforeEach s'appuie sur l'état stocké de Vuex et qu'un changement d'état est déclenché pendant la navigation, la fonction hook peut être à nouveau déclenchée. . En effet, les modifications du stockage Vuex déclenchent un nouveau rendu des composants, ce qui provoque à son tour la navigation sur l'itinéraire.

🎜🎜Comment éviter : 🎜🎜Afin d'éviter que router.beforeEach ne se déclenche deux fois, vous pouvez prendre les mesures suivantes : 🎜

• 🎜Éviter d'exécuter la navigation par itinéraire dans la fonction hook beforeEach : Si vous devez exécuter la navigation par itinéraire dans la fonction hook beforeEach, veuillez utiliser le next() rappel pour retarder la navigation jusqu'à ce que la navigation en cours soit terminée.
• 🎜Fusionner plusieurs gardes de route : Si plusieurs gardes de route doivent enregistrer la fonction de hook beforeEach, veuillez envisager de les fusionner en une seule fonction.
• 🎜Utilisez watch pour surveiller les modifications du stockage Vuex : Si la fonction de hook beforeEach dépend de l'état du stockage Vuex, veuillez utiliser watch() Fonction pour écouter les changements d'état au lieu de déclencher des changements d'état pendant la navigation.

🎜🎜Conclusion : 🎜🎜router.beforeEach qui se déclenche deux fois dans Vue est généralement dû à un mauvais ordre de navigation, à plusieurs gardes d'itinéraire ou à des modifications de stockage Vuex. En suivant les étapes ci-dessus, vous pouvez éviter cette situation et vous assurer que la fonction hook beforeEach s'exécute comme prévu. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!