Vue Router: основы

SPA на Vue показывает каталог, карточку товара и корзину - три разных экрана, но всё в одном HTML-документе. При переходе между ними нельзя перезагружать страницу: это убьёт состояние и плавность. И при этом URL должен меняться, чтобы работали закладки, кнопка Назад и прямые ссылки на товар. Vue Router решает обе задачи: сопоставляет URL с компонентами и переключает их без перезагрузки, синхронизируя адресную строку с тем, что на экране.

• Интернет-магазины: страницы каталога, товара, корзины и оформления как отдельные маршруты одного SPA
• Админки и дашборды: разделы пользователей, отчётов и настроек, переключаемые без перезагрузки
• Прямые ссылки и закладки: URL вида /product/42 открывает конкретный экран при заходе извне
• Кнопки Назад и Вперёд браузера: история навигации внутри SPA работает как на обычном сайте
• Документация и блоги на Vue: статьи как маршруты с человекочитаемыми путями

Предварительные знания

• Однофайловые компоненты Vue и их подключение
• Понимание идеи SPA: одно приложение переключает экраны без полной перезагрузки
• Базовое знание структуры URL: путь, история браузера

createRouter и конфигурация маршрутов

Роутер создаётся вызовом createRouter. Ему передаётся режим истории и массив routes, где каждый маршрут связывает путь URL с компонентом. Затем роутер подключается к приложению через app.use(router), и Vue начинает следить за адресной строкой.

Поле name у маршрута необязательно, но полезно: именованная навигация устойчивее к изменению путей. Если путь /catalog позже станет /shop, ссылки по имени catalog продолжат работать без правок.

Маршруты обычно выносят в отдельный файл router/index.js и импортируют в main. Это держит точку входа чистой и облегчает дальнейшее добавление гвардов и ленивой загрузки.

router-link, router-view и режимы истории

Два компонента образуют видимую часть роутера. router-view - это слот, куда рендерится компонент текущего маршрута. router-link заменяет обычную ссылку: он генерирует переход без перезагрузки страницы, перехватывая клик и меняя URL через History API. Обычный тег ссылки вызвал бы полную перезагрузку и сброс состояния SPA.

Режим истории задаётся при создании роутера. createWebHistory даёт чистые URL без решётки (/catalog), но требует, чтобы сервер отдавал index.html на любой путь. createWebHashHistory кладёт маршрут после решётки (/#/catalog) и работает без серверной настройки, потому что часть после хеша на сервер не уходит.

При createWebHistory прямой заход на /catalog или обновление страницы дадут 404, если сервер не настроен отдавать index.html на все маршруты. Это частая ошибка деплоя SPA: локально всё работает, на проде ломается обновление вложенной страницы.

useRouter и useRoute

Для навигации из кода и чтения данных текущего маршрута внутри setup есть два композабла. useRouter возвращает экземпляр роутера для программных переходов: push добавляет запись в историю, replace заменяет текущую без новой записи, back возвращает назад. useRoute возвращает реактивный объект текущего маршрута: путь, параметры, query-строку, meta.

Различие в названиях помогает не путать роли. useRouter - это про действие (куда перейти), useRoute - про данные (где мы сейчас). Объект route реактивен, поэтому его поля можно читать в computed и watch, и они обновятся при смене маршрута.

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

Связь с другими темами

Урок открывает блок про роутинг и управление состоянием:

• Компоненты — Маршрут связывает путь URL с компонентом, который рендерится в router-view
• Параметры и гварды — Следующий шаг: динамические сегменты пути и контроль навигации
• Ленивая загрузка — Конфигурация маршрутов позволяет грузить компоненты по требованию

Итог

• Vue Router сопоставляет URL с компонентами и переключает экраны SPA без перезагрузки страницы
• createRouter создаёт экземпляр роутера с режимом истории и массивом маршрутов вида path-component
• router-link генерирует навигацию без перезагрузки вместо обычного тега ссылки, а router-view - место, куда рендерится компонент текущего маршрута
• createWebHistory даёт чистые URL без решётки, createWebHashHistory использует хеш для хостингов без серверной поддержки SPA
• Внутри setup useRouter даёт программную навигацию (push, replace), а useRoute - данные текущего маршрута

Связанные уроки

• vue-03-sfc-components — Маршруты сопоставляют URL с компонентами, поэтому нужно понимать однофайловые компоненты
• vue-25-route-params-guards — Основы роутера - база для динамических параметров и навигационных гвардов из следующего урока
• vue-26-lazy-routes — Понимание конфигурации маршрутов открывает ленивую загрузку компонентов через динамический import