fix(router): 解决页面刷新时NavigationGuard阻止路由跳转的问题
- 修复NavigationGuard在页面刷新时错误地阻止路由导航的问题 - 添加页面刷新检测逻辑,允许刷新场景下的正常导航 - 优化防抖机制,使用时间戳进行更精确的重复点击检测 - 修复"Navigation aborted from '/' to '/system/user'"错误 问题原因: NavigationGuard的beforeEach守卫与主路由守卫冲突,在页面刷新时 误判正常的路由重定向为重复导航而阻止跳转。 解决方案: 1. 检测页面刷新场景(from.name为空或路径为'/') 2. 使用时间戳替代简单的路径对比进行防抖判断 3. 优化导航状态重置逻辑,保持防抖效果的同时允许正常导航
This commit is contained in:
parent
92ab0c3159
commit
b8d6e5d781
@ -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,保持防抖效果
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user