What are Named Routes?

Named routes let you reference routes by name instead of hard-coding paths everywhere. This makes your code more maintainable and refactor-friendly while providing type-safe navigation.

Before (Hard-coded paths)
Hard-coded approach 
 
 
After (Named routes)
 
Named routes approach 
 
 
 
Registering Named Routes
 
Register your routes once in your main.js or a routes configuration file:
 
Register Multiple Routes
 
Registering routes 
 
 
 
Register Single Route
 
Register single route 
 
 
 
Using Named Routes
 
The link action supports multiple convenient formats:
 
1. Legacy String Format (Still Works)
 
Legacy format 
 
 
 
2. Object with Direct href
 
Object with href 
 
 
 
3. Named Route with Parameters
 
Named route object 
 
 
 
4. Array Shorthand (Recommended)
 
Array shorthand examples 
 
 
 
Named Routes with Query Parameters
 
Easily add query parameters to your named routes:
 
Object Format
 
Object with query 
 
 
 
Array Format
 
Array with query 
 
 
 
Direct href with Query
 
Direct href with query 
 
 
 
Advanced Options
 
The object format supports additional options:
 
Advanced options 
 
 
 
Options Reference
 
  • route - Named route (mutually exclusive with href)
    •  
  • href - Direct path (mutually exclusive with route)
    •  
  • params - Route parameters object
    •  
  • query - Query string parameters object
    •  
  • replace - Use replaceState instead of pushState (default: false)
    •  
  • disabled - Disable navigation (default: false)
 
Programmatic Navigation
 
push() and replace() now support the same convenient formats as the link action!
 
Programmatic navigation 
 
 
 
📚 Learn More: For detailed documentation on programmatic navigation,
				including practical examples and best practices, see the Programmatic Navigation guide.
 
Utility Functions
 
hasRoute(name)
 
Check if a route is registered:
 
Check if route exists 
 
 
 
getRoutes()
 
Get all registered routes:
 
Get all routes 
 
 
 
clearRoutes()
 
Clear all registered routes (useful for testing):
 
Clear routes 
 
 
 
TypeScript Support
 
Full TypeScript support for type-safe navigation:
 
TypeScript support 
 
 
 
Practical Examples
 
Navigation Menu
 
Navigation menu 
 
 
 
User Profile Links
 
User profile links 
 
 
 
Dynamic List Navigation
 
Dynamic list 
 
 
 
Benefits
 
🔒 Type-safe
 
Define routes once, use them everywhere with TypeScript support
 
🔧 Refactor-friendly
 
Change URL patterns without updating every link in your codebase
 
✨ Cleaner code
 
No more string concatenation for building dynamic URLs
 
🎯 Flexible
 
Multiple syntax options - choose what fits your use case
 
🔄 Backward compatible
 
Old <a href="/path" use:link> still works!
 
📝 Self-documenting
 
Route names make code more readable and maintainable
 
Migration Guide
 
No breaking changes! Your existing code continues to work.
				You can gradually adopt named routes:
 
Gradual migration 
 
 
 
Try It Live
 
See named routes in action with our interactive demo:
 
🔗 Links Demo