How to define routes in Vue Router
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Defining routes in Vue Router establishes the navigation structure and component mapping for single-page applications with flexible configuration options. As the creator of CoreUI with extensive Vue.js development experience, I’ve implemented complex routing systems in enterprise applications and component libraries. From my expertise, the most effective approach is configuring route objects with path patterns, component mappings, and metadata for comprehensive navigation control. This pattern provides the foundation for all Vue Router functionality including nested routes, dynamic segments, and route guards.
Define route objects with path patterns and component mappings to establish application navigation structure.
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import UserProfile from '@/views/UserProfile.vue'
import NotFound from '@/views/NotFound.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { title: 'Home Page' }
},
{
path: '/about',
name: 'About',
component: About,
meta: { title: 'About Us' }
},
{
path: '/user/:id',
name: 'UserProfile',
component: UserProfile,
props: true,
meta: { requiresAuth: true }
},
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { requiresAuth: true }
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
Here each route object defines a path pattern, name for programmatic navigation, and component for rendering. Dynamic segments like :id capture URL parameters, while props: true passes them as component props. The meta field stores custom data for route guards and navigation logic. Lazy loading with import() enables code splitting, and the catch-all route handles 404 pages.
Best Practice Note:
This is the same approach we use in CoreUI Vue applications for building scalable navigation systems with proper code organization and performance optimization. Always use lazy loading for route components, define meaningful route names, and organize routes hierarchically for maintainable application structure.
