Вложенные маршруты

Nested Routes

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

# Простой пример

В этом примере маршрут /users содержит два вложенных маршрута: /users/list и /users/create

# Использование параметров

В этом примере маршрут /users/:id принимает параметр id и содержит два вложенных маршрута: /users/:id/profile и /users/:id/orders

# Использование префиксов

В этом примере маршрут /admin содержит префикс для всех вложенных маршрутов, что позволяет использовать более короткие пути.

Параметры вложенных маршрутов доступны в компонентах маршрута через свойство $route.params

Вложенные именованные маршруты

Когда вы имеете дело с именованными маршрутами, вы обычно даете дочерним маршрутам имена:

Это гарантирует, что при переходе к /user/:id всегда будет отображаться вложенный маршрут

В некоторых сценариях может потребоваться перейти к именованному маршруту без перехода к вложенному маршруту. Например, если вы хотите перейти к /user/:id без отображения вложенного маршрута. В этом случае вы также можете назвать родительский маршрут, но обратите внимание, что при перезагрузке страницы всегда будет отображаться вложенный дочерний, поскольку это считается переходом к пути /users/:id вместо именованного маршрута:

Пропуск родительских компонентов

Мы также можем воспользоваться отношениями "родитель-потомок" между маршрутами без необходимости вложения компонентов маршрута. Это может быть полезно для группировки маршрутов с общим префиксом пути или при работе с более продвинутыми функциями, такими как навигационные средства для каждого маршрута или мета-поля маршрута.

Чтобы достичь этого, мы опускаем параметры component и компоненты из родительского маршрута:

Поскольку родительский элемент не указывает компонент маршрута, router-view верхнего уровня пропустит родительский элемент и вместо этого просто использует компонент из соответствующего дочернего элемента.

Заключение

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