Что такое динамическое сопоставление маршрутов?vue-42

Динамическое сопоставление маршрутов — это мощная возможность Vue Router, позволяющая обрабатывать URL-адреса с переменными сегментами, где часть пути может меняться, но должна обрабатываться одним компонентом.

Как это работает

Вместо жесткого задания всех возможных путей, вы можете определить маршрут с динамическим сегментом, который будет сопоставляться с разными значениями. Это реализуется через параметры маршрута.

Базовый синтаксис

Динамические сегменты обозначаются двоеточием ::

const routes = [
  // динамический параметр начинается с :
  { path: '/user/:id', component: User }
]

В этом примере:

  • /user/1 → params: { id: '1' }
  • /user/42 → params: { id: '42' }
  • /user/abc → params: { id: 'abc' }

Доступ к параметрам в компоненте

Получить параметры можно через объект $route или с помощью Composition API:

Вариант 1: Options API

export default {
  computed: {
    userId() {
      return this.$route.params.id
    }
  }
}

Вариант 2: Composition API

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const userId = computed(() => route.params.id)

    return { userId }
  }
}

Реактивность параметров

Важно понимать, что при переходе между разными значениями одного динамического маршрута:

  • Компонент не пересоздается (используется повторно)
  • Вы можете реагировать на изменения параметров через watch:
watch(
  () => route.params.id,
  (newId) => {
    // выполнить действия при изменении id
  }
)

Расширенные возможности

Несколько динамических сегментов

{ path: '/user/:userId/post/:postId', component: UserPost }

Опциональные параметры

{ path: '/user/:userId?', component: User } // userId не обязателен

Регулярные выражения в параметрах

Можно ограничить формат параметра:

{ path: '/user/:id(\\d+)', component: User } // только цифры
{ path: '/user/:id([a-z]+)', component: User } // только буквы

Страница 404 через динамический маршрут

{ path: '/:pathMatch(.*)*', component: NotFound }

Практический пример

Допустим, у нас есть приложение блога:

const routes = [
  {
    path: '/post/:slug',
    component: Post,
    props: true // можно передавать params как props
  }
]

Компонент Post может использовать параметр:

<template>
  <div v-if="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  props: ['slug'],
  data() {
    return {
      post: null
    }
  },
  async created() {
    this.post = await fetchPostBySlug(this.slug)
  },
  watch: {
    slug(newSlug) {
      this.fetchPostBySlug(newSlug)
    }
  }
}
</script>

Резюмируем

  1. Динамические маршруты позволяют обрабатывать переменные части URL
  2. Параметры доступны через $route.params или useRoute()
  3. Компонент маршрута повторно используется при изменении параметров
  4. Можно использовать несколько параметров, регулярные выражения и опциональные сегменты
  5. Динамические маршруты — основа для создания гибких SPA-приложений

Эта функциональность особенно полезна для:

  • Страниц пользовательских профилей
  • Карточек товаров
  • Постов блога
  • Любых сущностей, где идентификатор является частью URL

Вопросы

Собеседования