RouteRecordRaw 类型别名 | Vue Router API

概述

RouteRecordRaw 是 Vue Router 中定义路由配置的核心类型别名。它描述了路由记录的各种可能形式，包括基础路由、嵌套路由、重定向、别名等。

类型定义

type RouteRecordRaw = 
  | RouteRecordSingleView
  | RouteRecordSingleViewWithChildren
  | RouteRecordMultipleViews
  | RouteRecordMultipleViewsWithChildren
  | RouteRecordRedirect

基本用法示例

单视图路由

{
  path: '/home',
  name: 'home',
  component: Home,
  meta: { requiresAuth: true }
}

嵌套路由

{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: 'dashboard', component: Dashboard },
    { path: 'users', component: UserManagement }
  ]
}

重定向路由

{
  path: '/old-path',
  redirect: '/new-path'
}

核心属性详解

path - 路由路径

path: '/'                    // 根路径
path: '/user/:id'           // 动态参数
path: '/files/*'            // 通配符路径

component / components - 路由组件

// 单组件
component: Home

// 多组件（命名视图）
components: {
  default: MainContent,
  sidebar: Sidebar
}

// 懒加载
component: () => import('./views/HeavyComponent.vue')

meta - 路由元信息

meta: {
  requiresAuth: true,
  title: '用户资料',
  permissions: ['read', 'write']
}

props - 参数传递

props: true  // 将 params 作为 props 传递

props: {     // 静态 props
  staticProp: 'value'
}

props: (route) => ({  // 动态 props
  id: parseInt(route.params.id)
})

实际应用场景

企业级路由配置

export default [
  // 公开路由
  {
    path: '/',
    name: 'home',
    component: Home
  },
  
  // 认证路由
  {
    path: '/dashboard',
    component: DashboardLayout,
    meta: { requiresAuth: true },
    children: [
      { path: '', component: Dashboard },
      { path: 'profile', component: UserProfile }
    ]
  },
  
  // 404 页面
  {
    path: '/:pathMatch(.*)*',
    component: NotFound
  }
]

动态路由生成

function generateFeatureRoutes(features) {
  const routes = []
  
  if (features.includes('ecommerce')) {
    routes.push({
      path: '/shop',
      component: ShopLayout,
      children: [
        { path: '', component: ProductList },
        { path: 'product/:id', component: ProductDetail }
      ]
    })
  }
  
  return routes
}

最佳实践

1. 使用命名路由 - 提高代码可维护性
2. 合理使用懒加载 - 优化应用性能
3. 统一元信息格式 - 便于守卫处理
4. 类型安全配置 - 使用 TypeScript 增强可靠性

🎯 总结：RouteRecordRaw 提供了灵活的路由配置方式，通过合理组合各种属性可以构建出强大的单页应用路由系统。