Vue Pure Admin项目中菜单栏点击触发beforeEach两次的问题分析

问题现象

在Vue Pure Admin 5.1.0版本中，当用户点击菜单栏进行路由跳转时，路由守卫beforeEach会被触发执行两次。这种情况可能会引起一些不必要的副作用，比如重复的权限校验、重复的日志记录等。

问题原因

经过分析，这个问题的主要原因是el-menu组件同时使用了router属性和自定义的点击事件处理。具体来说：

1. 当el-menu设置了router属性时，组件内部会自动处理路由跳转
2. 同时项目代码中又自定义了菜单点击事件处理
3. 这两种机制都会触发路由变化，导致beforeEach被调用两次

解决方案

最简单的解决方案是移除el-menu组件的router属性，只保留自定义的路由跳转逻辑。这样就能避免双重触发的问题。

技术细节

在Vue Router的工作机制中，每次路由变化都会触发全局前置守卫beforeEach。当两种不同的机制同时触发路由变化时：

1. 第一次触发来自el-menu的router属性
2. 第二次触发来自自定义的点击处理函数

虽然这不会影响功能正常运行，但可能会带来一些性能上的微小损耗和不必要的副作用。

最佳实践

在类似的管理系统项目中，建议统一路由跳转的处理方式：

1. 要么完全使用el-menu的router属性
2. 要么完全使用自定义的路由跳转逻辑

避免混合使用两种机制，这样可以保持代码的一致性和可维护性。

总结

这个问题虽然不影响核心功能，但了解其背后的原理有助于开发者更好地理解Vue Router的工作机制和Element UI组件的使用方式。在开发类似的管理系统时，应该注意路由跳转逻辑的统一性，避免不必要的重复触发。