Suggest an editImprove this articleRefine the answer for “What is the difference between params and query?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`params`** are part of the route's path (dynamic segments like `/users/:id`), while **`query`** is part of the URL after `?` (for example `?page=2`) and does not affect the route itself. **Key point:** params must be declared in the routes and are usually required, while query is always optional and does not change the route.Shown above the full answer for quick recall.Answer (EN)ImageThe 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: ```js { path: '/users/:id', component: UserPage } ``` #### URL: ``` /users/42 ``` #### Getting it: Composition API: ```js const route = useRoute() console.log(route.params.id) // "42" ``` Options API: ```js 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: ```js 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: ```js router.push({ name: 'user', params: { id: 10 } }) ``` #### query: ```js router.push({ path: '/users', query: { page: 2, sort: 'name' } }) ```For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.