RouteParamValue - 路由参数值类型别名

RouteParamValue 是一个类型别名，定义了路由路径参数值的标准数据类型。它用于表示动态路由路径中参数值的可能类型。🎯

📋 类型定义

type RouteParamValue = string

🎯 功能说明

这个类型别名定义了路由参数值的唯一可能类型：

1. 字符串值 - 所有路径参数最终都会转换为字符串

🔧 类型结构

基础定义

// RouteParamValue 的唯一类型
type RouteParamValue = string

// 在 RouteParams 中的使用
interface RouteParams {
  [key: string]: RouteParamValue | RouteParamValue[]
}

// 示例路径参数对象
const params: RouteParams = {
  id: "123",           // string
  category: "vue",     // string
  tags: ["a", "b"]     // string[]
}

💡 实际应用示例

访问路径参数值

import { useRoute } from 'vue-router'

const route = useRoute()

// route.params 中的值都是 RouteParamValue 类型（字符串）
const userId = route.params.id        // string
const category = route.params.category // string
const action = route.params.action     // string

参数类型转换

// 将字符串参数转换为其他类型
function parseRouteParam(
  value: RouteParamValue, 
  targetType: 'number' | 'boolean' | 'string' = 'string'
): any {
  switch (targetType) {
    case 'number':
      const num = Number(value)
      return isNaN(num) ? undefined : num
    case 'boolean':
      return value === 'true' ? true : value === 'false' ? false : undefined
    case 'string':
    default:
      return value
  }
}

// 使用示例
const userId = parseRouteParam(route.params.id, 'number') // number
const isEdit = parseRouteParam(route.params.action, 'boolean') // boolean

安全的参数处理

// 安全的参数提取函数
function getRouteParam(
  params: RouteParams, 
  key: string
): string | undefined {
  const value = params[key]
  
  if (Array.isArray(value)) {
    return value[0] // 取第一个值
  }
  
  return value || undefined
}

// 带默认值的参数提取
function getRouteParamWithDefault(
  params: RouteParams, 
  key: string, 
  defaultValue: string
): string {
  const value = getRouteParam(params, key)
  return value || defaultValue
}

🎯 常见使用场景

用户详情页面参数处理

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

// 处理用户ID参数
const userId = computed(() => {
  const idParam = route.params.id
  if (!idParam) return null
  
  const id = Number(idParam)
  return isNaN(id) ? null : id
})

// 处理操作类型参数
const actionType = computed(() => {
  const action = route.params.action
  return action || 'view' // 默认为查看模式
})
</script>

产品分类参数处理

// 分类参数验证和处理
function validateCategoryParam(category: RouteParamValue): string {
  const validCategories = ['electronics', 'clothing', 'books']
  return validCategories.includes(category) ? category : 'all'
}

// 使用示例
const currentCategory = validateCategoryParam(route.params.category)

// 多级分类参数处理
function parseCategoryPath(params: RouteParams): string[] {
  const categoryParam = params.category
  if (!categoryParam) return []
  
  if (Array.isArray(categoryParam)) {
    return categoryParam
  }
  
  // 处理斜杠分隔的路径：electronics/computers
  return categoryParam.split('/').filter(Boolean)
}

分页和排序参数

// 分页参数处理
interface PaginationConfig {
  page: number
  limit: number
  sortBy: string
  sortOrder: 'asc' | 'desc'
}

function getPaginationFromParams(params: RouteParams): PaginationConfig {
  return {
    page: Math.max(1, Number(params.page) || 1),
    limit: Math.min(50, Math.max(1, Number(params.limit) || 10)),
    sortBy: params.sortBy || 'name',
    sortOrder: params.sortOrder === 'desc' ? 'desc' : 'asc'
  }
}

🔧 实用工具函数

参数验证工具

// 验证参数是否符合特定模式
function validateParamPattern(
  value: RouteParamValue, 
  pattern: RegExp
): boolean {
  return pattern.test(value)
}

// 使用示例
const isValidId = validateParamPattern(route.params.id, /^\d+$/)
const isValidSlug = validateParamPattern(route.params.slug, /^[a-z0-9-]+$/)

参数构建工具

// 构建路径参数对象
function buildRouteParams(
  values: Record<string, string | number>
): RouteParams {
  const params: RouteParams = {}
  
  Object.entries(values).forEach(([key, value]) => {
    params[key] = value.toString()
  })
  
  return params
}

// 使用示例
const userParams = buildRouteParams({
  id: 123,
  action: 'edit'
})

参数编码和解码

// URL 安全的参数编码
function encodeRouteParam(value: string): RouteParamValue {
  return encodeURIComponent(value)
}

function decodeRouteParam(value: RouteParamValue): string {
  return decodeURIComponent(value)
}

// 处理特殊字符的参数
function handleSpecialParam(value: RouteParamValue): string {
  try {
    return decodeRouteParam(value)
  } catch {
    return value // 解码失败时返回原值
  }
}

🎯 路由配置中的参数使用

定义带参数的路由

const routes = [
  {
    path: '/user/:id',
    component: UserDetail,
    props: route => ({
      id: Number(route.params.id) // 转换为数字
    })
  },
  {
    path: '/product/:category/:id',
    component: ProductDetail,
    props: route => ({
      category: route.params.category,
      id: route.params.id
    })
  }
]

参数约束和验证

// 使用正则表达式约束参数格式
const routes = [
  {
    path: '/user/:id(\\d+)', // 只匹配数字ID
    component: UserDetail
  },
  {
    path: '/:locale(en|zh|ja)', // 只匹配指定语言代码
    component: LocalizedPage
  }
]

🔗 相关类型

• RouteParams - 路由参数对象类型

💡 专业建议：虽然路径参数在URL中都是字符串，但在应用逻辑中应该根据业务需求进行适当的类型转换和验证，确保数据的正确性。