Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «У чому різниця між params і query?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`params`** - це частина шляху маршруту (динамічні сегменти на кшталт `/users/:id`), а **`query`** - частина URL після `?` (наприклад `?page=2`), яка не впливає на сам маршрут. **Ключове:** params потрібно оголошувати в маршрутах і зазвичай вони обов'язкові, тоді як query завжди необов'язковий і не змінює маршрут.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняРізниця між **params** і **query** у Vue Router - одна з найчастіших тем на співбесідах. Ось пояснення так, як очікують почути. --- ## **Коротко:** - **params** - частина *шляху* маршруту (динамічні сегменти) - **query** - частина *URL після ?*, не впливає на сам маршрут --- ## **1. Params - параметри шляху (URL parameters)** Використовуються в **динамічних маршрутах**, оголошуються в `path` через `:name`. #### Приклад маршруту: ```js { path: '/users/:id', component: UserPage } ``` #### URL: ``` /users/42 ``` #### Отримання: Composition API: ```js const route = useRoute() console.log(route.params.id) // "42" ``` Options API: ```js this.$route.params.id ``` #### Основні особливості: - є **частиною маршруту** - змінюються -> **змінюється маршрут** - потребують визначення в routes - зазвичай обов'язкові (`/users/:id`) - не можна передати params у маршрути з `path: '/'` або без параметрів --- ## Коли використовувати params? - перегляд сутності: `/user/10` - сторінки товару: `/product/123` - вкладені маршрути: `/blog/2024/01` --- ## **2. Query - рядок запиту (URL query string)** Це дані після символу `?` в URL. #### Приклад URL: ``` /users?page=2&sort=price ``` #### Отримання: ```js const route = useRoute() console.log(route.query.page) // "2" console.log(route.query.sort) // "price" ``` #### Основні особливості: - **не є частиною маршруту** - не потребують опису в маршрутах - необов'язкові - можна передавати будь-які ключі - змінюють тільки параметри запиту, але маршрут залишається той самий --- ## Коли використовувати query? - фільтрація: `?category=books` - пошук: `?q=iphone` - сортування: `?sort=asc` - пагінація: `?page=3` --- ## Ключові відмінності (для співбесіди) | Характеристика | **params** | **query** | |---|---|---| | Де в URL? | частина шляху | після `?` | | Потрібно оголошувати в маршрутах? | так | ні | | Обов'язковість | зазвичай обов'язкові | завжди необов'язкові | | Змінюють маршрут? | так | ні | | Тип | параметри сутності | параметри фільтрації / сортування | | Приклад | `/users/10` | `/users?page=2` | --- ## Приклад push з params і query #### params: ```js router.push({ name: 'user', params: { id: 10 } }) ``` #### query: ```js router.push({ path: '/users', query: { page: 2, sort: 'name' } }) ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.