Динамическое сопоставление маршрутов

Во Vue Router вы можете легко создавать динамические маршруты с параметрами, что позволяет передавать данные через URL в вашем одностраничном приложении. Давайте рассмотрим пример, где у нас есть маршрут для отображения информации о пользователе по его ID

1.Определение маршрута в файле маршрутизации (router/index.js)

2. Создание компонента UserDetails.vue для отображения информации о пользователе

В данном примере мы используем $route.params.id для получения значения параметра ID из URL. Это позволяет нам отображать информацию о пользователе с определенным ID

Теперь, когда пользователь перейдет по URL вида /user/123, компонент UserDetails будет отображать информацию о пользователе с ID 123. Вы также можете использовать динамические маршруты для других сценариев, где параметры маршрута играют ключевую роль

Это лишь один из множества способов использования динамического сопоставления маршрутов с параметрами во Vue Router

404 Маршрут не найден

Обычные параметры будут соответствовать только символам между фрагментами URL, разделенными /. Если мы хотим сопоставить что-либо, мы можем использовать собственное регулярное выражение параметра, добавив регулярное выражение в круглые скобки сразу после параметра

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