diff --git a/src/utils/navigation-guard.ts b/src/utils/navigation-guard.ts index acdda41..e5978c4 100644 --- a/src/utils/navigation-guard.ts +++ b/src/utils/navigation-guard.ts @@ -9,6 +9,7 @@ export class NavigationGuard { private pendingNavigation: string | null = null private navigationTimer: NodeJS.Timeout | null = null private readonly NAVIGATION_DEBOUNCE = 100 // 100ms防抖 + private lastNavigationTime = 0 constructor(router: Router) { this.router = router @@ -18,13 +19,34 @@ export class NavigationGuard { private setupGuards() { // 在路由开始时设置导航状态 this.router.beforeEach((to, from, next) => { - // 如果正在导航中,取消之前的导航 - if (this.isNavigating && this.pendingNavigation === to.fullPath) { + const targetPath = to.fullPath + const currentTime = Date.now() + + // 检查是否是页面刷新或首次加载(from.name为null或undefined) + const isPageRefresh = !from.name || from.fullPath === '/' + + // 如果是页面刷新,直接重置状态并允许导航 + if (isPageRefresh) { + this.resetNavigationState() + this.lastNavigationTime = currentTime + next() + return + } + + // 检查是否是快速重复点击(时间间隔小于防抖时间且目标路径相同) + const timeSinceLastNavigation = currentTime - this.lastNavigationTime + const isQuickDuplicate = timeSinceLastNavigation < this.NAVIGATION_DEBOUNCE + && this.pendingNavigation === targetPath + + if (isQuickDuplicate) { + console.warn('快速重复导航被阻止:', targetPath) return next(false) } + // 更新导航状态 this.isNavigating = true - this.pendingNavigation = to.fullPath + this.pendingNavigation = targetPath + this.lastNavigationTime = currentTime // 清除之前的定时器 if (this.navigationTimer) { @@ -59,6 +81,7 @@ export class NavigationGuard { } this.isNavigating = false this.pendingNavigation = null + // 注意:不重置 lastNavigationTime,保持防抖效果 } /**