Вложенные маршруты
Вложенные маршруты в 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 являются мощным инструментом для организации сложных приложений с несколькими уровнями навигации. Они позволяют создавать иерархические структуры маршрутов, используя параметры и префиксы для большей гибкости.