\n\n\n```\n\n`props: true` прокидывает params как props — удобнее тестировать. Опциональные сегменты: `/posts/:id?`. Повторяющиеся: `/file/:path+`.\n\n## Важно\nПри переходе `/users/1` → `/users/2` тот же компонент может **переиспользоваться**: watch на `() => route.params.id` или `beforeRouteUpdate` / `onBeforeRouteUpdate`.\n\n## Итог\nДинамический роут = параметризованный path + `params`; помните про reuse компонента при смене только params."}}}

Что такое динамический роутинг?

Vue · junior · сложность 2

Войти, чтобы отмечать

Базовое понимание

Dynamic routing — параметры в пути (:id), из которых Vue Router собирает route.params. Один компонент обслуживает много URL.

Пример

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

<script setup>
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
// route.params.id
router.push({ name: 'user', params: { id: '42' } })
</script>

<template>
  <p>User #{{ $route.params.id }}</p>
</template>

props: true прокидывает params как props — удобнее тестировать. Опциональные сегменты: /posts/:id?. Повторяющиеся: /file/:path+.

Важно

При переходе /users/1 → /users/2 тот же компонент может переиспользоваться: watch на () => route.params.id или beforeRouteUpdate / onBeforeRouteUpdate.

Итог

Динамический роут = параметризованный path + params; помните про reuse компонента при смене только params.

Загрузка…