How to create dynamic routes in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Dynamic routes allow you to create flexible URL patterns that accept variable parameters, essential for building scalable Vue applications with user profiles, product pages, or content management systems. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented dynamic routing in countless Vue admin dashboards and web applications. From my 25 years of experience in web development and 11 years with Vue, the most efficient approach is to use parameter placeholders in route paths with colons (:) to define dynamic segments. This pattern provides clean URLs and automatic parameter extraction.
Use parameter placeholders with colons in your route path to create dynamic routes that accept variable segments.
import { createRouter, createWebHistory } from 'vue-router'
import UserProfile from './components/UserProfile.vue'
import ProductDetails from './components/ProductDetails.vue'
const routes = [
{
path: '/user/:id',
component: UserProfile
},
{
path: '/product/:category/:id',
component: ProductDetails
},
{
path: '/post/:slug?',
component: BlogPost
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
The colon : prefix creates a dynamic parameter that captures the URL segment and makes it available in your component through $route.params. Multiple parameters can be defined in a single route, like /product/:category/:id. Adding a question mark ? after the parameter name makes it optional. These parameters are automatically extracted and passed to your components, allowing you to build flexible, data-driven routing patterns.
This is the same dynamic routing approach we use in CoreUI Vue admin templates for flexible dashboard navigation and content management.
For complex parameter validation, use custom regex patterns like /user/:id(\\d+) to ensure parameters match specific formats.
