How to use query params in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Query parameters provide a powerful way to pass optional data through URLs in Vue applications, enabling features like filtering, pagination, and search functionality.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented query parameter handling in countless Vue admin dashboards and data management interfaces.
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.query in Options API or useRoute() in Composition API.
This pattern provides reactive access to URL search parameters.
Access query parameters using $route.query in Options API or useRoute() in Composition API for reactive URL data.
// Options API
export default {
computed: {
currentPage() {
return Number(this.$route.query.page) || 1
},
searchTerm() {
return this.$route.query.search || ''
}
},
watch: {
'$route.query': {
handler(newQuery) {
this.fetchData(newQuery)
},
immediate: true
}
}
}
// Composition API
import { useRoute, useRouter } from 'vue-router'
import { computed, watch } from 'vue'
export default {
setup() {
const route = useRoute()
const router = useRouter()
const currentPage = computed(() => Number(route.query.page) || 1)
const searchTerm = computed(() => route.query.search || '')
const updateQuery = (params) => {
router.push({ query: { ...route.query, ...params } })
}
watch(() => route.query, (newQuery) => {
fetchData(newQuery)
}, { immediate: true })
return { currentPage, searchTerm, updateQuery }
}
}
The $route.query object contains all query parameters as key-value pairs, automatically updated when the URL changes. Query parameters are always strings, so convert them to numbers or other types as needed. Use watchers to respond to query parameter changes for data fetching or filtering. The router.push() method with a query object updates the URL while preserving existing parameters through the spread operator.
This is the same query parameter handling approach we use in CoreUI Vue admin templates for dynamic data filtering and pagination. For complex query parameter logic, consider creating a composable function that encapsulates query parameter management and provides reusable methods across components.
