Named Routes

Simplify navigation and make your routes more maintainable by giving them meaningful names.

Introduction

Instead of using paths for navigation, you can give routes names and reference them by name. This provides several advantages including cleaner code, automatic parameter encoding, and better maintainability.

Basic Named Routes

Define routes with names using the name property:

javascript

const routes = [
  {
    path: '/user/:username',
    name: 'user-profile',
    component: UserProfile
  },
  {
    path: '/user/:username/posts',
    name: 'user-posts', 
    component: UserPosts
  },
  {
    path: '/settings',
    name: 'settings',
    component: Settings
  }
]

Using Named Routes

In Templates with RouterLink

vue

<template>
  <!-- Using route name instead of path -->
  <router-link :to="{ name: 'user-profile', params: { username: 'john' } }">
    View Profile
  </router-link>
  
  <!-- With query parameters -->
  <router-link :to="{ 
    name: 'user-posts', 
    params: { username: 'john' },
    query: { page: 1 }
  }">
    View Posts
  </router-link>
  
  <!-- Simple route without parameters -->
  <router-link :to="{ name: 'settings' }">
    Settings
  </router-link>
</template>

javascript

// Navigate using route name
router.push({ name: 'user-profile', params: { username: 'john' } })

// With query parameters
router.push({ 
  name: 'user-posts', 
  params: { username: 'john' },
  query: { page: 1, sort: 'date' }
})

// Simple navigation
router.push({ name: 'settings' })

Advantages of Named Routes

1. No Hardcoded URLs

javascript

// ❌ Hardcoded path - fragile
router.push('/user/john/posts?page=1')

// ✅ Named route - maintainable
router.push({ 
  name: 'user-posts', 
  params: { username: 'john' },
  query: { page: 1 }
})

2. Automatic Parameter Encoding

javascript

const username = 'john doe' // Contains space
const postTitle = 'Hello & Welcome!' // Contains special characters

// ✅ Automatic encoding with named routes
router.push({ 
  name: 'post-detail',
  params: { username, title: postTitle }
})
// Results in: /user/john%20doe/posts/Hello%20%26%20Welcome!

// ❌ Manual encoding required with paths
router.push(`/user/${encodeURIComponent(username)}/posts/${encodeURIComponent(postTitle)}`)

3. Avoid URL Typos

javascript

// ❌ Easy to make typos
router.push('/user/john/setings') // Typo: "setings"

// ✅ IDE can catch typos in route names
router.push({ name: 'user-settings' }) // IDE autocomplete helps

4. Path Independence

If you change the path structure, you only need to update the route definition:

javascript

const routes = [
  {
    // Change path without breaking navigation code
    path: '/profile/:username', // Changed from '/user/:username'
    name: 'user-profile',
    component: UserProfile
  }
]

// Navigation code remains unchanged
router.push({ name: 'user-profile', params: { username: 'john' } })

Advanced Usage

Nested Named Routes

javascript

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User,
    children: [
      {
        path: '',
        name: 'user-home',
        component: UserHome
      },
      {
        path: 'profile',
        name: 'user-profile',
        component: UserProfile
      },
      {
        path: 'posts/:postId',
        name: 'user-post',
        component: UserPost
      }
    ]
  }
]

Navigation to nested routes:

javascript

// Navigate to user home
router.push({ name: 'user-home', params: { username: 'john' } })

// Navigate to user profile  
router.push({ name: 'user-profile', params: { username: 'john' } })

// Navigate to specific post
router.push({ 
  name: 'user-post', 
  params: { username: 'john', postId: '123' }
})

Dynamic Route Names

Generate route names dynamically for similar patterns:

javascript

const createUserRoutes = (userType) => [
  {
    path: `/${userType}/:id`,
    name: `${userType}-detail`,
    component: UserDetail,
    props: { userType }
  },
  {
    path: `/${userType}/:id/edit`,
    name: `${userType}-edit`, 
    component: UserEdit,
    props: { userType }
  }
]

const routes = [
  ...createUserRoutes('admin'),
  ...createUserRoutes('customer'),
  ...createUserRoutes('vendor')
]

// Navigate to different user types
router.push({ name: 'admin-detail', params: { id: '123' } })
router.push({ name: 'customer-edit', params: { id: '456' } })

Best Practices

1. Use Descriptive Names

javascript

// ✅ Good: Descriptive and clear
const routes = [
  { path: '/products', name: 'product-list', component: ProductList },
  { path: '/products/:id', name: 'product-detail', component: ProductDetail },
  { path: '/products/:id/edit', name: 'product-edit', component: ProductEdit },
  { path: '/cart', name: 'shopping-cart', component: ShoppingCart },
  { path: '/checkout', name: 'checkout-process', component: Checkout }
]

// ❌ Avoid: Vague or abbreviated names
const routes = [
  { path: '/products', name: 'list', component: ProductList },
  { path: '/products/:id', name: 'detail', component: ProductDetail },
  { path: '/products/:id/edit', name: 'edit', component: ProductEdit },
  { path: '/cart', name: 'cart', component: ShoppingCart },
  { path: '/checkout', name: 'co', component: Checkout }
]

2. Consistent Naming Convention

javascript

// ✅ Consistent kebab-case convention
const routes = [
  { name: 'user-profile', /* ... */ },
  { name: 'user-settings', /* ... */ },
  { name: 'user-posts', /* ... */ },
  { name: 'admin-dashboard', /* ... */ },
  { name: 'admin-users', /* ... */ }
]

// ❌ Inconsistent naming
const routes = [
  { name: 'userProfile', /* ... */ },
  { name: 'user_settings', /* ... */ },
  { name: 'UserPosts', /* ... */ },
  { name: 'admin-dashboard', /* ... */ },
  { name: 'adminusers', /* ... */ }
]

javascript

// ✅ Grouped by feature/module
const routes = [
  // User routes
  { name: 'user-list', /* ... */ },
  { name: 'user-detail', /* ... */ },
  { name: 'user-edit', /* ... */ },
  
  // Product routes
  { name: 'product-list', /* ... */ },
  { name: 'product-detail', /* ... */ },
  { name: 'product-edit', /* ... */ },
  
  // Order routes
  { name: 'order-list', /* ... */ },
  { name: 'order-detail', /* ... */ },
  { name: 'order-tracking', /* ... */ }
]

javascript

// utils/navigation.js
export const navigateToUser = (router, username, section = 'profile') => {
  const routeMap = {
    profile: 'user-profile',
    posts: 'user-posts',
    settings: 'user-settings'
  }
  
  router.push({
    name: routeMap[section],
    params: { username }
  })
}

// In component
import { navigateToUser } from '@/utils/navigation'

const handleUserClick = (username) => {
  navigateToUser(router, username, 'profile')
}

TypeScript Support

Define route names as constants for better type safety:

typescript

// types/routes.ts
export const ROUTE_NAMES = {
  USER_PROFILE: 'user-profile',
  USER_POSTS: 'user-posts',
  USER_SETTINGS: 'user-settings',
  PRODUCT_LIST: 'product-list',
  PRODUCT_DETAIL: 'product-detail'
} as const

export type RouteName = typeof ROUTE_NAMES[keyof typeof ROUTE_NAMES]

// routes.ts
import { ROUTE_NAMES } from './types/routes'

const routes = [
  {
    path: '/user/:username',
    name: ROUTE_NAMES.USER_PROFILE,
    component: UserProfile
  }
]

// In component
router.push({ 
  name: ROUTE_NAMES.USER_PROFILE, 
  params: { username: 'john' } 
})

Common Pitfalls

1. Duplicate Route Names

javascript

// ❌ Duplicate names - only the last one will be kept
const routes = [
  { path: '/admin/users', name: 'users', component: AdminUsers },
  { path: '/public/users', name: 'users', component: PublicUsers } // Overwrites the first
]

// ✅ Unique names
const routes = [
  { path: '/admin/users', name: 'admin-users', component: AdminUsers },
  { path: '/public/users', name: 'public-users', component: PublicUsers }
]

2. Missing Parameters

javascript

// ❌ Missing required parameter
router.push({ name: 'user-profile' }) // username parameter missing

// ✅ Provide all required parameters
router.push({ name: 'user-profile', params: { username: 'john' } })

3. Incorrect Parameter Types

javascript

// ❌ Wrong parameter type
router.push({ 
  name: 'user-profile', 
  params: { username: { id: 123 } } // Object instead of string
})

// ✅ Correct parameter type
router.push({ 
  name: 'user-profile', 
  params: { username: '123' } // String
})

Debugging Named Routes

1. Check Route Registration

javascript

// Check if route is registered
const route = router.resolve({ name: 'user-profile' })
console.log('Route exists:', route.name !== undefined)

2. List All Route Names

javascript

// Get all registered route names
const routeNames = router.getRoutes().map(route => route.name).filter(Boolean)
console.log('Registered routes:', routeNames)

javascript

const navigateWithValidation = (name, params = {}) => {
  try {
    const resolved = router.resolve({ name, params })
    if (resolved.name) {
      router.push({ name, params })
    } else {
      console.error(`Route "${name}" not found`)
    }
  } catch (error) {
    console.error('Navigation error:', error)
  }
}

Next Steps

Learn about Programmatic Navigation for dynamic routing
Explore Route Guards for route protection
Understand Route Meta Fields for additional route data

Named Routes

Introduction

Basic Named Routes

Using Named Routes

In Templates with RouterLink

Programmatic Navigation

Advantages of Named Routes

1. No Hardcoded URLs

2. Automatic Parameter Encoding

3. Avoid URL Typos

4. Path Independence

Advanced Usage

Nested Named Routes

Dynamic Route Names

Best Practices

1. Use Descriptive Names

2. Consistent Naming Convention

4. Create Navigation Helpers

TypeScript Support

Common Pitfalls

1. Duplicate Route Names

2. Missing Parameters

3. Incorrect Parameter Types

Debugging Named Routes

1. Check Route Registration

2. List All Route Names

3. Validate Navigation

Next Steps

Named Routes ​

Introduction ​

Basic Named Routes ​

Using Named Routes ​

In Templates with RouterLink ​

Programmatic Navigation ​

Advantages of Named Routes ​

1. No Hardcoded URLs ​

2. Automatic Parameter Encoding ​

3. Avoid URL Typos ​

4. Path Independence ​

Advanced Usage ​

Nested Named Routes ​

Dynamic Route Names ​

Best Practices ​

1. Use Descriptive Names ​

2. Consistent Naming Convention ​

3. Group Related Routes ​

4. Create Navigation Helpers ​

TypeScript Support ​

Common Pitfalls ​

1. Duplicate Route Names ​

2. Missing Parameters ​

3. Incorrect Parameter Types ​

Debugging Named Routes ​

1. Check Route Registration ​

2. List All Route Names ​

3. Validate Navigation ​

Next Steps ​

Named Routes

Introduction

Basic Named Routes

Using Named Routes

In Templates with RouterLink

Programmatic Navigation

Advantages of Named Routes

1. No Hardcoded URLs

2. Automatic Parameter Encoding

3. Avoid URL Typos

4. Path Independence

Advanced Usage

Nested Named Routes

Dynamic Route Names

Best Practices

1. Use Descriptive Names

2. Consistent Naming Convention

3. Group Related Routes

4. Create Navigation Helpers

TypeScript Support

Common Pitfalls

1. Duplicate Route Names

2. Missing Parameters

3. Incorrect Parameter Types

Debugging Named Routes

1. Check Route Registration

2. List All Route Names

3. Validate Navigation

Next Steps