ErrorTypes - 错误类型枚举

ErrorTypes 是一个枚举类型，定义了 Vue Router 中可能出现的各种错误类型。它用于分类和识别路由相关的错误情况。🚨

📋 枚举定义

enum ErrorTypes {
  MATCHER_NOT_FOUND = 1,
  NAVIGATION_GUARD_REDIRECT = 2,
  NAVIGATION_ABORTED = 4,
  NAVIGATION_CANCELLED = 8,
  NAVIGATION_DUPLICATED = 16
}

🎯 功能说明

这个枚举提供了路由错误的详细分类：

1. MATCHER_NOT_FOUND (1) - 路由匹配器未找到
2. NAVIGATION_GUARD_REDIRECT (2) - 导航守卫重定向
3. NAVIGATION_ABORTED (4) - 导航被中止
4. NAVIGATION_CANCELLED (8) - 导航被取消
5. NAVIGATION_DUPLICATED (16) - 重复导航

🔧 技术细节

枚举值定义

// 完整的枚举定义
enum ErrorTypes {
  MATCHER_NOT_FOUND = 1,          // 0b0001
  NAVIGATION_GUARD_REDIRECT = 2, // 0b0010
  NAVIGATION_ABORTED = 4,        // 0b0100
  NAVIGATION_CANCELLED = 8,      // 0b1000
  NAVIGATION_DUPLICATED = 16     // 0b10000
}

💡 实际应用示例

全局错误处理

import { ErrorTypes } from 'vue-router'

// 全局错误处理器
function handleRouterError(error) {
  switch (error.type) {
    case ErrorTypes.MATCHER_NOT_FOUND:
      console.error('路由匹配失败:', error.location)
      // 显示404页面
      show404Page(error.location)
      break
      
    case ErrorTypes.NAVIGATION_GUARD_REDIRECT:
      console.log('导航被守卫重定向')
      // 处理重定向逻辑
      handleGuardRedirect(error)
      break
      
    case ErrorTypes.NAVIGATION_ABORTED:
      console.error('导航被中止:', error.message)
      // 显示中止信息
      showAbortedMessage(error.message)
      break
      
    case ErrorTypes.NAVIGATION_CANCELLED:
      console.log('导航被取消')
      // 处理取消逻辑
      handleCancelledNavigation()
      break
      
    case ErrorTypes.NAVIGATION_DUPLICATED:
      console.log('重复导航尝试')
      // 忽略或处理重复导航
      handleDuplicatedNavigation()
      break
      
    default:
      console.error('未知路由错误:', error)
  }
}

// 注册全局错误处理器
router.onError(handleRouterError)

错误监控组件

<script setup>
import { ErrorTypes } from 'vue-router'
import { ref } from 'vue'

const errorLog = ref([])

// 错误监控函数
function setupErrorMonitoring() {
  // 监听路由错误
  router.onError((error) => {
    const errorRecord = {
      timestamp: new Date().toISOString(),
      type: getErrorTypeName(error.type),
      message: error.message,
      location: error.location,
      stack: error.stack
    }
    
    errorLog.value.push(errorRecord)
    
    // 发送错误报告（生产环境）
    if (process.env.NODE_ENV === 'production') {
      sendErrorReport(errorRecord)
    }
  })
}

// 获取错误类型名称
function getErrorTypeName(type) {
  switch (type) {
    case ErrorTypes.MATCHER_NOT_FOUND: return '路由匹配失败'
    case ErrorTypes.NAVIGATION_GUARD_REDIRECT: return '导航守卫重定向'
    case ErrorTypes.NAVIGATION_ABORTED: return '导航被中止'
    case ErrorTypes.NAVIGATION_CANCELLED: return '导航被取消'
    case ErrorTypes.NAVIGATION_DUPLICATED: return '重复导航'
    default: return '未知错误'
  }
}

// 初始化错误监控
setupErrorMonitoring()
</script>

<template>
  <div class="error-monitor" v-if="errorLog.length > 0">
    <details>
      <summary>路由错误监控 ({{ errorLog.length }} 个错误)</summary>
      
      <div v-for="(error, index) in errorLog" :key="index" class="error-item">
        <div class="error-header">
          <span class="error-type">{{ error.type }}</span>
          <span class="error-time">{{ error.timestamp.split('T')[1] }}</span>
        </div>
        <div class="error-message">{{ error.message }}</div>
        <div class="error-location" v-if="error.location">
          位置: {{ error.location.path }}
        </div>
      </div>
    </details>
  </div>
</template>

💡 专业建议：在生产环境中，建议实现完整的错误监控和报告系统，以便及时发现和修复路由相关的问题。