How to use route params in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Accessing URL parameters is essential for building dynamic Vue applications that respond to different route segments like user IDs, product categories, or content slugs.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented parameter handling in numerous Vue admin dashboards and content management systems.
From my 25 years of experience in web development and 11 years with Vue, the most effective approach depends on your Vue version - use $route.params in Options API or the useRoute composable in Composition API.
Both methods provide reactive access to current route parameters.
Access route parameters using $route.params in Options API or useRoute() in Composition API.
// Options API
export default {
computed: {
userId() {
return this.$route.params.id
}
},
watch: {
'$route.params.id'(newId) {
this.fetchUser(newId)
}
}
}
// Composition API
import { useRoute, watch } from 'vue'
export default {
setup() {
const route = useRoute()
const userId = computed(() => route.params.id)
watch(() => route.params.id, (newId) => {
fetchUser(newId)
})
return { userId }
}
}
The $route.params object contains all dynamic parameters defined in your route path. Parameters are automatically updated when the route changes, triggering reactivity in computed properties and watchers. In Composition API, useRoute() returns the current route object with reactive properties. Use watchers to respond to parameter changes for data fetching or component updates. Parameters are always strings, so convert them to numbers if needed with Number(route.params.id).
This is the same parameter handling pattern we use in CoreUI Vue admin templates for dynamic content loading and navigation.
For query parameters, use $route.query instead of $route.params to access URL search parameters like ?page=1&sort=name.
