Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як оголосити динамічний маршрут?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Динамічний маршрут - це маршрут, у якому **частина шляху є змінною** (параметром).
Він дозволяє створювати сторінки на кшталт:

```
/users/10
/products/42
/posts/my-article
```

У Vue Router динамічний маршрут оголошується за допомогою **двокрапки (**`:`**)** перед іменем параметра.

---

## Приклад оголошення динамічного маршруту

```js
const routes = [
  {
    path: '/users/:id',
    component: UserPage
  }
]
```

Тепер шлях `/users/5` або `/users/1234` - обидва підходять під цей маршрут.

---

## Як отримати параметр маршруту?

У Composition API:

```js
import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.id)
```

У Options API:

```js
this.$route.params.id
```

---

## Приклад використання з компонентом

#### router.js

```js
const routes = [
  {
    path: '/product/:productId',
    name: 'product',
    component: ProductPage
  }
]
```

#### ProductPage.vue

```vue
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.productId)
</script>
```

---

## Можна додавати кілька параметрів

```js
{
  path: '/users/:userId/posts/:postId',
  component: PostPage
}
```

---

## Параметри можна зробити **необов'язковими**

```js
{
  path: '/search/:query?',
  component: SearchPage
}
```

---

## Можна використовувати **регулярні вирази**

```js
{
  path: '/user/:id(\\d+)',
  component: UserPage
}
```

Дозволить лише числові id.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати181 слів

Для рев’юера

Бачить лише модератор. Прискорює рев’ю.