导航

导航相关的类型和工具函数。NavigateResult 描述导航的结果状态，NavState 枚举定义了所有可能的导航状态，hasSuccess() 和 hasState() 用于便捷地检查导航结果。

导航结果对象，包含导航的状态、来源、目标等信息。由 router.push()、router.replace() 等方法返回。

类型定义

ts
interface NavigateResult {
  state: NavState
  message: string
  to: RouteLocation | null
  from: RouteLocation
  redirectFrom?: RouteLocation
}

属性说明

属性类型说明
stateNavState导航状态枚举值，表示导航的最终结果
messagestring状态描述信息，便于调试和日志记录
toRouteLocation | null目标路由位置。当 state 为 notfound 或 external 时为 null
fromRouteLocation来源路由位置
redirectFromRouteLocation重定向来源。如果在守卫或路由配置中被重定向，此属性为最初要导航到的路由位置

示例

ts
const result = await router.push('/user/123')

if (result.state === NavState.success) {
  console.log('导航成功')
} else if (result.state === NavState.aborted) {
  console.log('导航被守卫拦截:', result.message)
} else if (result.state === NavState.duplicated) {
  console.log('重复导航:', result.message)
}

// 检查重定向链
if (result.redirectFrom) {
  console.log('从', result.redirectFrom.path, '重定向到', result.to?.path)
}

导航状态枚举，使用位标志（bitmask）设计，支持按位操作进行多状态组合检查。

类型定义

ts
enum NavState {
  success = 1, // 1  - 导航成功
  aborted = 2, // 2  - 导航被守卫阻止
  cancelled = 4, // 4  - 导航被取消（被更新的导航取代）
  duplicated = 8, // 8  - 重复导航（目标与当前路由一致）
  notfound = 16, // 16 - 路由未匹配
  external = 32 // 32 - 外部链接（不由路由器处理）
}

枚举值说明

值名称数值说明
success导航成功1导航成功完成，路由已切换到目标位置
aborted导航被阻止2导航被前置守卫（beforeEach 或 beforeEnter）拦截
cancelled导航被取消4导航被更新的导航请求取代（并发导航竞争）
duplicated重复导航8目标路由与当前路由完全一致，未执行导航
notfound路由未匹配16目标路径未匹配到任何已注册的路由规则
external外部链接32目标为外部链接（http:// 或 https://），不由路由器处理

详情

位标志设计允许通过按位运算组合多个状态进行检查。例如：

ts
// 检查是否为失败导航（非成功且非外部链接）
const isFailure =
  (result.state &
    (NavState.aborted | NavState.cancelled | NavState.duplicated | NavState.notfound)) !==
  0

示例

ts
import { NavState } from 'vitarx-router'

const result = await router.push('/some-path')

switch (result.state) {
  case NavState.success:
    console.log('导航成功')
    break
  case NavState.aborted:
    console.log('导航被守卫阻止')
    break
  case NavState.cancelled:
    console.log('导航被取消')
    break
  case NavState.duplicated:
    console.log('重复导航')
    break
  case NavState.notfound:
    console.log('路由未找到')
    break
  case NavState.external:
    console.log('外部链接')
    break
}

hasSuccess()

检查导航结果是否为成功状态。

类型定义

ts
function hasSuccess(result: NavigateResult): boolean

参数

参数类型说明
resultNavigateResult导航结果对象

返回值

类型说明
boolean导航成功返回 true，否则返回 false

详情

hasSuccess() 严格检查 state 是否等于 NavState.success（即 state === 1），不使用按位运算。

示例

ts
import { hasSuccess } from 'vitarx-router'

const result = await router.push('/user/123')
if (hasSuccess(result)) {
  console.log('导航成功！')
}

hasState()

按位检查导航结果是否包含指定的状态。支持使用按位或（|）操作符组合多个状态进行检查。

类型定义

ts
function hasState(result: NavigateResult, status: NavState): boolean

参数

| 参数 | 类型 | 说明 | | ------ | ---------------- | ---------------------- | -------------- | | result | NavigateResult | 导航结果对象 | | status | NavState | 要检查的状态，可使用 | 组合多个状态 |

返回值

类型说明
boolean导航结果包含指定状态返回 true，否则返回 false

详情

hasState() 使用按位与运算检查 result.state 是否包含指定的状态位。可以组合多个状态进行检查：

ts
// 检查是否为失败导航（被阻止或被取消）
hasState(result, NavState.aborted | NavState.cancelled)

示例

ts
import { hasState, NavState } from 'vitarx-router'

const result = await router.push('/some-path')

// 检查是否被守卫阻止
if (hasState(result, NavState.aborted)) {
  console.log('导航被守卫阻止')
}

// 检查是否为失败导航（被阻止或被取消）
if (hasState(result, NavState.aborted | NavState.cancelled)) {
  console.log('导航失败')
}

参考：导航结果