Vue-Pure-Admin项目中路由守卫重复触发问题解析

问题背景

在Vue-Pure-Admin项目(基于Vue 3和Vue Router)中，开发者在使用onBeforeRouteLeave路由守卫时发现了一个特殊现象：当通过点击标签栏切换路由时，该守卫会被触发两次，而通过菜单栏切换则表现正常。

技术原理分析

onBeforeRouteLeave是Vue Router提供的导航守卫之一，用于在组件即将离开当前路由时执行特定逻辑。正常情况下，每次路由切换应该只触发一次该守卫。

在Vue-Pure-Admin项目中，标签栏切换路由的实现机制与菜单栏不同。通过代码分析发现：

1. 标签栏组件同时使用了router-link和自定义的@click事件处理
2. 点击标签时，会同时触发原生路由跳转和自定义的点击处理
3. 这种双重触发机制导致了路由守卫被调用两次

问题复现条件

要复现该问题，需要满足以下条件：

1. 在任意组件内使用onBeforeRouteLeave守卫
2. 在守卫内添加确认对话框等交互逻辑
3. 通过点击标签栏而非菜单栏进行路由切换

解决方案

经过深入分析，提供了两种解决方案：

方案一：移除自定义点击事件

直接移除标签栏组件的@click事件处理，仅保留router-link的原生路由跳转功能。这种方法简单直接，但可能影响某些自定义逻辑。

方案二：优化router-link配置

将router-link的to属性置空，同时保留自定义点击处理。这种方法可以：

1. 保持原有的点击区域大小
2. 避免原生路由跳转和自定义处理的冲突
3. 确保路由守卫只触发一次

最佳实践建议

对于需要在路由切换时进行确认的场景，推荐：

1. 统一路由跳转机制，避免多重触发
2. 在组件内使用onBeforeRouteLeave时，考虑添加防重处理
3. 对于复杂场景，可以使用Pinia/Vuex管理路由状态
4. 测试时需覆盖不同路由切换方式(菜单、标签、编程式导航)

总结

路由守卫的重复触发问题在复杂SPA应用中并不罕见。通过分析Vue-Pure-Admin项目中的这个案例，我们可以更好地理解Vue Router的工作机制，并在实际开发中避免类似问题的发生。关键在于统一路由跳转的处理方式，避免多重触发导致的意外行为。