Ожидание результата навигации
При использовании router-link Vue Router вызывает router.push для запуска навигации. Хотя ожидаемое поведение большинства ссылок заключается в переходе пользователя на новую страницу, есть несколько ситуаций, когда пользователи остаются на той же странице
- Пользователи уже находятся на странице, на которую пытаются перейти
- Навигационная защита прерывает навигацию, выполнив return false
- Новый навигационный пост происходит, пока предыдущий не закончен
- Навигационная защита перенаправляет куда-то еще, возвращая новое местоположение (например, return '/login')
- Навигатор бросает Error
Обнаружение сбоев навигации
Если навигация заблокирована, в результате чего пользователь остается на той же странице, разрешенное значение Promise, возвращаемое router.push, будет означать сбой навигации. В противном случае это будет ложное значение (обычно неопределенное). Это позволяет нам отличить случай, когда мы отклонились от того места, где находимся
Сбои навигации - это случаи ошибок с несколькими дополнительными свойствами, которые дают нам достаточно информации, чтобы понять, какая навигация была предотвращена и почему. Чтобы проверить характер результата навигации, используйте функцию isNavigationFailure
Сбои в глобальной навигации
Вы можете обнаружить глобальные сбои навигации по всему миру, используя router.afterEach()
Непредвиденные ошибки
- Ошибки в компонентах маршрута: Если у компонента маршрута есть ошибки в коде, это может привести к сбою навигации.
- Исключения JavaScript: Любое необработанное исключение JavaScript может прервать навигацию.
- Проблемы с сервером: Если ваше приложение делает запросы к серверу, проблемы с сервером могут помешать навигации.
Предотвращение сбоев в навигации
- Тщательно проверяйте конфигурацию маршрута на наличие ошибок.
- Используйте маршрутные охраны для защиты приватных или авторизованных маршрутов.
- Инициализируйте Vue Router в начале вашего приложения.
- Используйте $router только в пределах компонентов Vue
- Обрабатывайте ошибки в компонентах маршрута с помощью блоков обработки ошибок
- Используйте try-catch для обработки исключений JavaScript
- Обеспечьте надежную связь с сервером.
Зная о распространенных сбоях в навигации Vue Router и принимая меры по их предотвращению, вы можете создать надежное и плавное приложение одностраничного приложения.