Динамическая маршрутизация в Vue

Что делать, если у вас есть, например страница юзера, и вы хотите передавать динамические данные, такие как ID юзера в URL? Для этого существует динамическая маршрутизация.

Пример маршрута с динамическим сегментом:

src/router.jsimport { createRouter, createWebHistory } from 'vue-router';
import User from './components/User.vue';

const routes = [
    {
        path: '/user/:id',
        name: 'User',
        component: User
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

Здесь :id это динамический сегмент, который может быть любым значением, например /user/123 или /user/ivanov. Теперь в компоненте User мы можем получить это значение через объект route. Таким образом, каждый раз, когда вы переходите на страницу /user/123, значение id будет доступно через $route.params.id:

components/User.vue<script>
export default {
  data() {
    return {
      name: 'Пользователи',
    }
  }
}
</script>
<template>
  <h3>{{ name }} №:{{ $route.params.id }}</h3>
</template>