**Динамические параметры (params)** — часть URL-пути: ```javascript // router/index.js const routes = [ { path: '/users/:id', name: 'user-profile', component: () => import('@/views/UserProfile.vue'), }, { // Несколько параметров path: '/blog/:year/:slug', name: 'blog-post', component: () => import('@/views/BlogPost.vue'), }, ] ``` ```vue ``` **Query-параметры** — после `?` в URL: ```vue ``` **Props-режим** — лучшая практика. Вместо привязки компонента к `useRoute()`, передавай params как props: ```javascript const routes = [ { path: '/users/:id', name: 'user-profile', component: () => import('@/views/UserProfile.vue'), // Включаем props-режим props: true, }, { path: '/settings', component: () => import('@/views/Settings.vue'), // Функциональный режим — для query props: (route) => ({ tab: route.query.tab || 'general', }), }, ] ``` ```vue ``` Почему props-режим лучше? Компонент становится независимым от роутера. Его можно отрендерить в модалке, в тестах, в Storybook — просто передав props напрямую. **Опциональные и повторяющиеся параметры:** ```javascript const routes = [ // Опциональный параметр — добавь ? { path: '/users/:id?' }, // /users и /users/42 — оба сработают // Повторяющийся параметр — + (один или более) { path: '/files/:path+' }, // /files/docs/2024/report.pdf // route.params.path === ['docs', '2024', 'report.pdf'] // Повторяющийся опциональный — * { path: '/files/:path*' }, // /files и /files/docs/report.pdf // Валидация через regexp { path: '/users/:id(\\d+)' }, // Только числа ] ``` --- ## 📌 Реальные кейсы **Кейс 1: Каталог с фильтрацией** ```javascript // Params для структуры, query для фильтров const routes = [ { path: '/catalog/:category', name: 'catalog', component: () => import('@/views/Catalog.vue'), props: (route) => ({ category: route.params.category, filters: { sort: route.query.sort || 'popular', minPrice: Number(route.query.minPrice) || 0, maxPrice: Number(route.query.maxPrice) || Infinity, page: Number(route.query.page) || 1, }, }), }, ] ``` ```vue ``` **Кейс 2: Вложенная навигация с breadcrumbs** ```javascript const routes = [ { path: '/projects/:projectId', component: () => import('@/layouts/ProjectLayout.vue'), props: true, children: [ { path: '', name: 'project-overview', component: () => import('@/views/ProjectOverview.vue'), }, { path: 'tasks/:taskId', name: 'project-task', component: () => import('@/views/TaskDetail.vue'), props: true, // Получит и projectId, и taskId }, ], }, ] ``` ```vue ``` --- ## Частые ошибки ❌ Забывать, что params — всегда строки: ```javascript // Баг: сравнение строки с числом if (route.params.id === 42) { // Никогда не сработает! } ``` ✅ Явно приводить типы: ```javascript const userId = Number(route.params.id) if (userId === 42) { // Корректно } // Или ещё лучше — конвертировать в props: // props: route => ({ id: Number(route.params.id) }) ``` --- ❌ Передавать params по path вместо name: ```javascript // params ИГНОРИРУЮТСЯ при использовании path! router.push({ path: '/users', params: { id: 42 } }) // Результат: /users — без id ``` ✅ С params используй только name: ```javascript router.push({ name: 'user-profile', params: { id: 42 } }) // Результат: /users/42 ``` --- ❌ Не реагировать на смену параметров в том же маршруте: ```vue ``` ✅ Следить за параметрами через watch: ```vue ``` --- ❌ Жестко привязывать компонент к роутеру: ```vue ``` ✅ Использовать props-режим: ```javascript // В роутере: props: true ``` ```vue ``` --- ## Резюме | Механизм | Когда | Пример URL | |---|---|---| | `params` (`:id`) | Идентификация ресурса | `/users/42` | | `query` (`?key=val`) | Фильтры, сортировка, пагинация | `/products?page=2&sort=price` | | `props: true` | Отвязка компонента от роутера | — | | `props: (route) => ({})` | Трансформация params/query в props | — | Params — для структуры, query — для состояния. Props-режим — всегда включай, это бесплатный выигрыш в тестируемости. --- ---

Как передавать параметры через маршрут в Vue Router?