NavigationFailureType - 导航失败类型枚举

NavigationFailureType 是一个枚举类型，定义了 Vue Router 导航过程中可能发生的各种失败类型。它用于精确识别和分类导航错误。⚠️

📋 枚举定义

enum NavigationFailureType {
  redirected = 2,
  aborted = 4,
  cancelled = 8,
  duplicated = 16
}

🎯 功能说明

这个枚举提供了导航失败的具体分类：

1. redirected (2) - 导航被重定向
2. aborted (4) - 导航被中止
3. cancelled (8) - 导航被取消
4. duplicated (16) - 重复导航

🔧 技术细节

枚举值定义

// 完整的枚举定义
enum NavigationFailureType {
  redirected = 2,   // 0b0010
  aborted = 4,      // 0b0100  
  cancelled = 8,    // 0b1000
  duplicated = 16   // 0b10000
}

位运算支持

由于枚举值使用2的幂次方，支持位运算检测：

// 检查是否为特定类型的失败
const isRedirected = (failure.type & NavigationFailureType.redirected) !== 0
const isAborted = (failure.type & NavigationFailureType.aborted) !== 0

💡 实际应用示例

导航错误处理

import { NavigationFailureType, isNavigationFailure } from 'vue-router'

// 全局错误处理
router.push('/target').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
    console.log('导航被重定向:', failure.to.path)
    // 处理重定向逻辑
  }
  
  if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
    console.log('导航被中止:', failure.message)
    // 处理中止逻辑
  }
  
  if (isNavigationFailure(failure, NavigationFailureType.cancelled)) {
    console.log('导航被取消')
    // 处理取消逻辑
  }
  
  if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
    console.log('重复导航:', failure.from.path)
    // 处理重复导航
  }
})

详细的错误处理组件

<script setup>
import { NavigationFailureType, isNavigationFailure } from 'vue-router'
import { ref } from 'vue'

const errorMessage = ref('')
const errorType = ref('')

// 导航错误处理函数
async function handleNavigation(to) {
  try {
    await router.push(to)
  } catch (failure) {
    if (isNavigationFailure(failure)) {
      // 根据失败类型显示不同的错误信息
      switch (failure.type) {
        case NavigationFailureType.redirected:
          errorMessage.value = `导航被重定向到: ${failure.to.path}`
          errorType.value = 'redirected'
          break
          
        case NavigationFailureType.aborted:
          errorMessage.value = `导航被中止: ${failure.message}`
          errorType.value = 'aborted'
          break
          
        case NavigationFailureType.cancelled:
          errorMessage.value = '导航被取消，可能是由于权限检查失败'
          errorType.value = 'cancelled'
          break
          
        case NavigationFailureType.duplicated:
          errorMessage.value = `重复导航: 您已经在 ${failure.from.path} 页面`
          errorType.value = 'duplicated'
          break
          
        default:
          errorMessage.value = `未知导航错误: ${failure.type}`
          errorType.value = 'unknown'
      }
    } else {
      // 非导航失败的错误
      errorMessage.value = `系统错误: ${failure.message}`
      errorType.value = 'system'
    }
  }
}
</script>

<template>
  <div class="navigation-handler">
    <button @click="handleNavigation('/target')">
      导航到目标页面
    </button>
    
    <div v-if="errorMessage" :class="['error-message', errorType]">
      <h4>导航错误</h4>
      <p>{{ errorMessage }}</p>
      
      <div v-if="errorType === 'redirected'" class="suggestion">
        <p>系统正在将您重定向到正确的页面...</p>
      </div>
      
      <div v-else-if="errorType === 'duplicated'" class="suggestion">
        <p>您已经在该页面，无需重复导航。</p>
      </div>
      
      <button @click="errorMessage = ''">关闭</button>
    </div>
  </div>
</template>

🔗 相关函数

• isNavigationFailure() - 检测导航失败

💡 专业建议：使用 isNavigationFailure() 函数来安全地检测导航失败，而不是直接检查错误对象的类型属性。