У чому різниця між params і query?
Різниця між 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' } })Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.