RouteRecordRaw Type Alias | Vue Router

RouteRecordRaw is a type alias that represents a raw route configuration object before it's normalized by the router. This is the main type used when defining routes in your Vue Router configuration. 📋

📋 Type Definition

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

🎯 Purpose and Usage

The RouteRecordRaw type alias encompasses all possible route configuration formats that Vue Router accepts. It provides TypeScript type safety while allowing flexible route definition patterns.

Key Characteristics:

• ✅ Type Safety - Ensures route configurations are valid at compile time
• ✅ Flexibility - Supports various route definition patterns
• ✅ Comprehensive - Covers all route configuration scenarios
• ✅ Developer Experience - Provides excellent IDE support and autocomplete

📝 Route Configuration Patterns

Basic Route with Component

const route: RouteRecordRaw = {
  path: '/home',
  component: HomeComponent
}

Named Route with Meta

const route: RouteRecordRaw = {
  path: '/user/:id',
  name: 'user-profile',
  component: UserProfile,
  meta: { 
    requiresAuth: true,
    title: 'User Profile'
  }
}

Route with Props

const route: RouteRecordRaw = {
  path: '/product/:id',
  component: ProductDetail,
  props: true // Automatically pass params as props
}

const routeWithCustomProps: RouteRecordRaw = {
  path: '/search',
  component: SearchResults,
  props: (route) => ({ 
    query: route.query.q,
    page: parseInt(route.query.page) || 1
  })
}

🔧 Advanced Route Configurations

Redirect Routes

const redirectRoute: RouteRecordRaw = {
  path: '/old-path',
  redirect: '/new-path'
}

const namedRedirect: RouteRecordRaw = {
  path: '/legacy',
  redirect: { name: 'modern-route' }
}

const functionalRedirect: RouteRecordRaw = {
  path: '/dynamic-redirect',
  redirect: (to) => {
    // Dynamic redirect logic
    return userIsAdmin() ? '/admin' : '/user'
  }
}

Alias Routes

const routeWithAliases: RouteRecordRaw = {
  path: '/primary',
  component: PrimaryComponent,
  alias: ['/secondary', '/tertiary'] // Multiple aliases
}

const pathAlias: RouteRecordRaw = {
  path: '/users',
  component: UsersList,
  alias: '/members' // /members shows UsersList component
}

Route with Multiple Named Views

const multiViewRoute: RouteRecordRaw = {
  path: '/settings',
  components: {
    default: SettingsLayout,
    sidebar: SettingsSidebar,
    header: SettingsHeader
  }
}

🏗️ Nested Routes Structure

Basic Nested Routes

const parentRoute: RouteRecordRaw = {
  path: '/admin',
  component: AdminLayout,
  children: [
    {
      path: 'dashboard',
      component: AdminDashboard
    },
    {
      path: 'users',
      component: UserManagement
    },
    {
      path: 'settings',
      component: AdminSettings
    }
  ]
}

Nested Routes with Parameters

const nestedWithParams: RouteRecordRaw = {
  path: '/blog/:category',
  component: BlogCategory,
  children: [
    {
      path: ':postId',
      component: BlogPost,
      props: true
    }
  ]
}

// Results in paths like:
// /blog/technology → BlogCategory component
// /blog/technology/123 → BlogPost component with category and postId params

🔄 Route Meta Configuration

Authentication and Authorization

const protectedRoute: RouteRecordRaw = {
  path: '/admin',
  component: AdminPanel,
  meta: { 
    requiresAuth: true,
    requiredPermissions: ['admin', 'moderator'],
    breadcrumb: 'Administration'
  }
}

SEO and Page Metadata

const seoOptimizedRoute: RouteRecordRaw = {
  path: '/article/:slug',
  component: ArticlePage,
  meta: {
    title: (to) => `Article: ${to.params.slug}`,
    description: 'Read our latest article',
    robots: 'index, follow',
    canonical: (to) => `https://example.com/article/${to.params.slug}`
  }
}

Feature Flags and A/B Testing

const featureRoute: RouteRecordRaw = {
  path: '/new-feature',
  component: NewFeature,
  meta: {
    featureFlag: 'new-ui',
    abTest: 'variant-b',
    requiredFlags: ['beta-access']
  }
}

💡 Practical Examples

E-commerce Application Routes

const ecommerceRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: HomePage,
    meta: { title: 'Welcome to Our Store' }
  },
  {
    path: '/products',
    component: ProductCatalog,
    children: [
      {
        path: '',
        name: 'products',
        component: ProductList,
        meta: { title: 'All Products' }
      },
      {
        path: ':category',
        name: 'products-by-category',
        component: ProductList,
        props: true,
        meta: { 
          title: (to) => `${to.params.category} Products` 
        }
      },
      {
        path: 'detail/:id',
        name: 'product-detail',
        component: ProductDetail,
        props: true
      }
    ]
  },
  {
    path: '/checkout',
    component: CheckoutLayout,
    meta: { requiresAuth: true },
    children: [
      { path: 'cart', component: ShoppingCart },
      { path: 'shipping', component: ShippingInfo },
      { path: 'payment', component: PaymentMethod },
      { path: 'confirmation', component: OrderConfirmation }
    ]
  }
]

Admin Dashboard Routes

const adminRoutes: RouteRecordRaw[] = [
  {
    path: '/admin',
    redirect: '/admin/dashboard',
    meta: { requiresAdmin: true }
  },
  {
    path: '/admin',
    component: AdminLayout,
    meta: { requiresAdmin: true },
    children: [
      {
        path: 'dashboard',
        component: AdminDashboard,
        meta: { title: 'Dashboard', icon: 'dashboard' }
      },
      {
        path: 'users',
        component: UserManagement,
        meta: { title: 'User Management', icon: 'users' },
        children: [
          {
            path: 'list',
            component: UserList,
            meta: { title: 'All Users' }
          },
          {
            path: 'create',
            component: UserCreate,
            meta: { title: 'Create User' }
          },
          {
            path: 'edit/:id',
            component: UserEdit,
            props: true,
            meta: { title: 'Edit User' }
          }
        ]
      },
      {
        path: 'analytics',
        component: Analytics,
        meta: { 
          title: 'Analytics', 
          icon: 'analytics',
          requiredPermissions: ['view_analytics']
        }
      }
    ]
  }
]

🔗 Related Type Aliases

• RouteRecordSingleView - Single component routes
• RouteRecordMultipleViews - Multiple named views
• RouteRecordRedirect - Redirect routes
• RouteRecordNormalized - Normalized route records

🚨 Common Pitfalls

Incorrect Path Definitions

// ❌ Incorrect - missing leading slash for root paths
const badRoute: RouteRecordRaw = {
  path: 'home', // Should be '/home'
  component: Home
}

// ✅ Correct - proper path formatting
const goodRoute: RouteRecordRaw = {
  path: '/home',
  component: Home
}

Component Import Issues

// ❌ Incorrect - component not properly imported
const badRoute: RouteRecordRaw = {
  path: '/about',
  component: AboutComponent // Not imported or undefined
}

// ✅ Correct - proper component reference
import AboutComponent from './views/About.vue'

const goodRoute: RouteRecordRaw = {
  path: '/about',
  component: AboutComponent
}

// ✅ Correct - lazy loading
const lazyRoute: RouteRecordRaw = {
  path: '/lazy',
  component: () => import('./views/LazyPage.vue')
}

Meta Property Type Safety

// ❌ Incorrect - arbitrary meta properties without type safety
const unsafeMeta: RouteRecordRaw = {
  path: '/unsafe',
  component: SomeComponent,
  meta: {
    arbitraryProperty: 'value' // No type checking
  }
}

// ✅ Correct - typed meta properties
interface RouteMeta {
  requiresAuth?: boolean
  title?: string
  // Define all allowed meta properties
}

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    title?: string
  }
}

const safeRoute: RouteRecordRaw = {
  path: '/safe',
  component: SomeComponent,
  meta: {
    requiresAuth: true,
    title: 'Safe Route'
    // arbitraryProperty: 'value' // TypeScript error
  }
}

📚 Best Practices

1. Route Organization

// Organize routes by feature/module
const userRoutes: RouteRecordRaw[] = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/profile', component: UserProfile }
]

const productRoutes: RouteRecordRaw[] = [
  { path: '/products', component: ProductList },
  { path: '/products/:id', component: ProductDetail }
]

// Combine all routes
const routes: RouteRecordRaw[] = [
  ...userRoutes,
  ...productRoutes,
  // Fallback route
  { path: '/:pathMatch(.*)*', component: NotFound }
]

2. Type Safety with Meta

// Define your application's meta structure
declare module 'vue-router' {
  interface RouteMeta {
    // Authentication
    requiresAuth?: boolean
    requiredRoles?: string[]
    
    // SEO
    title?: string | ((route: RouteLocationNormalized) => string)
    description?: string
    
    // UI
    breadcrumb?: string
    icon?: string
    
    // Feature flags
    featureFlag?: string
  }
}

// Now all meta properties are type-checked
const typedRoute: RouteRecordRaw = {
  path: '/typed',
  component: TypedComponent,
  meta: {
    requiresAuth: true,
    title: 'Typed Route',
    // invalidProperty: 'value' // TypeScript error
  }
}

3. Lazy Loading for Performance

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  },
  {
    path: '/contact',
    component: () => import('./views/Contact.vue')
  }
]

💡 Pro Tip: Use the RouteRecordRaw type alias consistently throughout your application to ensure type safety and better developer experience with autocomplete and error detection.