Общие положения
- Определение маршрутов (Routes): С помощью Vue Router вы можете определить маршруты для различных URL-адресов вашего приложения. Каждый маршрут связывается с определенным компонентом Vue.js, который будет отображаться при переходе по этому маршруту
- Маршруты с параметрами: Vue Router позволяет определять маршруты с динамическими параметрами, что делает возможным передачу данных через URL. Например, вы можете иметь маршрут для профиля пользователя с параметром ID пользователя
- Вложенные маршруты (Nested Routes): Вы можете создавать вложенные маршруты, что позволяет вам организовывать структуру вашего приложения в виде дерева маршрутов
- Навигация и переходы между страницами: Vue Router предоставляет возможность программного управления навигацией в вашем приложении. Вы можете переходить между страницами с помощью методов API или директив маршрутизатора
- Защита маршрутов (Route Guards): Vue Router предоставляет механизмы для защиты маршрутов, позволяя вам контролировать доступ к определенным страницам на основе различных условий, таких как аутентификация пользователя
- Использование истории браузера: Vue Router позволяет использовать историю браузера для навигации (например, переход назад или вперед) или использовать режим истории HTML5 для создания "чистых" URL-адресов без хэшей
- Динамическая загрузка компонентов: Vue Router поддерживает динамическую загрузку компонентов, что позволяет оптимизировать загрузку приложения, загружая компоненты только при необходимости
Используя Vue Router, вы можете создать гибкую и удобную систему навигации в ваших Vue.js приложениях, обеспечивая лучший пользовательский опыт и управление состоянием приложения
Создание одностраничного приложения с помощью Vue + Vue Router кажется естественным: с помощью Vue.js мы уже составляем наше приложение из компонентов. При добавлении Vue Router в микс все, что нам нужно сделать, это сопоставить наши компоненты с маршрутами и сообщить Vue Router, где их визуализировать
Базовый пример
В javascript мы должны создать массив роутов сопоставления url с компонентом приложения
Затем создать роутер
Подключаем роутер к приложению
Вызывая app.use(router), мы запускаем начальную навигацию и предоставляем доступ к this.$router текущему маршруту, как и this.$route внутри любого компонента
Чтобы получить доступ к маршрутизатору или маршруту внутри функции setup, вызовите функцию useRouter или useRoute
Объект route является реактивным объектом, поэтому можно отслеживать любые его свойства, но следует избегать наблюдения за всем route объектом. В большинстве сценариев вам следует напрямую следить за параметром, который вы собираетесь изменить
Navigation Guards
Хотя вы по-прежнему можете использовать внутрикомпонентные навигационные средства защиты с setup функцией, Vue Router предоставляет обновления и оставляет средства защиты как функции Composition API
Можно использовать в любом компоненте, отображаемом с помощью router-view, их не обязательно использовать непосредственно в компоненте маршрута, как внутрикомпонентную защиту
useLink
Vue Router представляет внутреннее поведение RouterLink как компонуемое(composable). Он принимает реактивный объект, такой как props, RouterLink и предоставляет низкоуровневые свойства для создания собственного RouterLink компонента или создания пользовательских ссылок
Обратите внимание, что RouterLink v-slot предоставляет доступ к тем же свойствам, что и useLink составной элемент