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 存储变更会触发组件重新渲染，这反过来又会导致路由导航。

如何避免：

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

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

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

结论：

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！