What is the difference between params and query?

VueJunior~1 min read

The difference between params and query in Vue Router is one of the most common interview topics. Here is the explanation in the way it is expected to be given.

In short:

params are part of the route's path (dynamic segments)
query is part of the URL after ?, and does not affect the route itself

1. Params - path parameters (URL parameters)

Used in dynamic routes, declared in path via :name.

Route example:

{
  path: '/users/:id',
  component: UserPage
}

URL:

/users/42

Getting it:

Composition API:

const route = useRoute()
console.log(route.params.id) // "42"

Options API:

this.$route.params.id

Main features:

they are part of the route
when they change, the route changes
they must be defined in the routes
usually required (/users/:id)
params cannot be passed to routes with path: '/' or without parameters

When to use params?

viewing an entity: /user/10
product pages: /product/123
nested routes: /blog/2024/01

2. Query - URL query string

This is the data after the ? character in the URL.

URL example:

/users?page=2&sort=price

Getting it:

const route = useRoute()
console.log(route.query.page)   // "2"
console.log(route.query.sort)   // "price"

Main features:

they are not part of the route
they do not need to be described in the routes
optional
any keys can be passed
they change only the query parameters, while the route stays the same

When to use query?

filtering: ?category=books
search: ?q=iphone
sorting: ?sort=asc
pagination: ?page=3

Key differences (for interviews)

Characteristic	params	query
Where in the URL?	part of the path	after `?`
Must be declared in the routes?	yes	no
Required	usually required	always optional
Change the route?	yes	no
Type	entity parameters	filtering / sorting parameters
Example	`/users/10`	`/users?page=2`

Example of push with params and query

params:

router.push({ name: 'user', params: { id: 10 } })

query:

router.push({ path: '/users', query: { page: 2, sort: 'name' } })

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.