Як оголосити динамічний маршрут?

VueJunior~1 хв читання

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

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

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

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

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

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

У Composition API:

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.id)

У Options API:

this.$route.params.id

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

vue

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

const route = useRoute()

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

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

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

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

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

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.