Учебник Vue Router

Введение
- Что такое Vue Router
- Зачем нужна маршрутизация в SPA
- История и эволюция Vue Router
- Установка и настройка окружения
- Версии и совместимость с Vue
Основы маршрутизации
- Концепция клиентской маршрутизации
- Создание первого роутера
- Компонент RouterView
- Компонент RouterLink
- Программная навигация через router.push
- Режимы истории: hash и history
- Параметры маршрутов
- Динамические сегменты пути
- Получение параметров в компонентах
Вложенные маршруты
- Структура вложенных маршрутов
- Настройка children в конфигурации
- Множественные RouterView
- Именованные представления
- Передача props в дочерние маршруты
- Абсолютные и относительные пути
Именованные маршруты и навигация
- Определение имен маршрутов
- Навигация по имени
- Преимущества именованных маршрутов
- Генерация ссылок
- Метод router.resolve
Передача данных через маршруты
- Props в маршрутах
- Режимы передачи props: boolean, object, function
- Query параметры
- Hash фрагменты
- Состояние истории (history state)
Навигационные хуки
- Глобальные хуки beforeEach
- Глобальные хуки beforeResolve
- Глобальные хуки afterEach
- Хуки конкретных маршрутов beforeEnter
- Хуки внутри компонентов beforeRouteEnter
- Хуки внутри компонентов beforeRouteUpdate
- Хуки внутри компонентов beforeRouteLeave
- Порядок выполнения хуков
- Контроль навигации через next
- Отмена и перенаправление навигации
Продвинутая навигация
- Метод router.replace
- Метод router.go
- Навигация вперед и назад
- Обработка ошибок навигации
- Обнаружение дублирующих переходов
- Прерывание навигации
Ленивая загрузка компонентов
- Динамический import
- Разделение кода по маршрутам
- Группировка компонентов в chunk'и
- Префетчинг и предзагрузка
- Стратегии загрузки
Защита маршрутов
- Проверка прав доступа
- Редирект на страницу входа
- Защита отдельных маршрутов
- Защита групп маршрутов
- Хранение состояния аутентификации
Мета-поля маршрутов
- Определение meta
- Использование meta в хуках
- Управление заголовками страниц
- Хлебные крошки через meta
- Роли и разрешения в meta
Переходы и анимация
- Transition при смене маршрутов
- Анимация RouterView
- Различные анимации для разных маршрутов
- Режимы перехода
- Интеграция с CSS-фреймворками
Прокрутка страницы
- Управление поведением скролла
- Функция scrollBehavior
- Сохранение позиции скролла
- Прокрутка к якорям
- Асинхронная прокрутка
Работа с историей браузера
- API History
- Режим HTML5 History
- Режим Hash
- Режим Memory (абстрактный)
- Настройка base URL
- Обработка 404 на сервере
Composition API и Vue Router
- Хук useRouter
- Хук useRoute
- Реактивность объекта route
- Типизация с TypeScript
- Навигационные хуки в setup
Редиректы и алиасы
- Настройка redirect
- Динамические редиректы
- Создание alias
- Множественные алиасы
- Различия между redirect и alias
Обработка ошибок
- Маршрут-заглушка для 404
- Обработка несуществующих путей
- Кастомные страницы ошибок
- Логирование ошибок навигации
Расширенная конфигурация
- Опции создания роутера
- Strict и sensitive режимы
- Кастомная функция parseQuery
- Кастомная функция stringifyQuery
- Настройка linkActiveClass
- Настройка linkExactActiveClass
Интеграция с Vuex/Pinia
- Синхронизация маршрута и хранилища
- Доступ к router в store
- Навигация из actions
- Сохранение параметров маршрута в state
Тестирование
- Моки роутера для unit-тестов
- Тестирование навигационных хуков
- Тестирование компонентов с RouterLink
- Эмуляция навигации
Серверный рендеринг (SSR)
- Создание роутера на сервере
- Синхронизация состояния
- Обработка асинхронных данных
- Мета-теги и SEO
- Префетчинг данных
Производительность и оптимизация
- Уменьшение размера бандла
- Оптимизация ленивой загрузки
- Кеширование компонентов
- Prefetch стратегии
- Анализ и мониторинг
Миграция между версиями
- Отличия Vue Router 3 от Vue Router 4
- Критические изменения API
- Обновление синтаксиса
- Адаптация навигационных хуков
- Работа с новым Composition API
Паттерны и лучшие практики
- Организация структуры маршрутов
- Модульная архитектура роутинга
- Переиспользование конфигурации
- Именование и структура файлов
Отладка
- Vue Devtools и роутер
- Логирование навигации
- Поиск проблем с хуками
- Диагностика производительности
Интеграция с экосистемой
- Vue Router и TypeScript
- Автодополнение маршрутов
- Генерация типов
- Плагины для роутера
- Сторонние расширения