Ошибки навигации

Новое в 3.4.0

При использовании router-link, Vue Router вызывает router.push для запуска навигации. Хотя ожидаемое поведение для большинства ссылок заключается в переходе пользователя на новую страницу, есть несколько ситуаций, в которых пользователи останутся на той же странице:

• Пользователи уже находятся на странице, на которую они пытаются перейти
• Защитный механизм навигации прерывает навигацию, вызвав next(false)
• Защитный механизм навигации генерирует ошибку или вызывает next(new Error())

При использовании компонента router-link, ни одна из этих ошибок не будет записываться в журнал. Однако, если вы используете router.push или router.replace, в консоли может появиться сообщение "Ошибка Uncaught (in promise)", за которым следует более конкретное сообщение. Давайте разберемся, как отличить ошибки навигации.

История изменений

В версии v3.2.0, ошибки навигации были доступны через два необязательных обратного вызова router.push: onComplete и onAbort. С версии 3.1.0, router.push и router.replace возвращают Promise, если не предоставлен обратный вызов onComplete/onAbort. Этот Promise разрешается вместо вызова onComplete и отклоняется вместо вызова onAbort.

Обнаружение ошибок навигации

Ошибки навигации являются экземплярами Error с несколькими дополнительными свойствами. Чтобы проверить, происходит ли ошибка от Router, используйте функцию isNavigationFailure:

import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter

// trying to access the admin page
router.push('/admin').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
    // show a small notification to the user
    showToast('Login in order to access the admin panel')
  }
})

СОВЕТ

Если вы опустите второй параметр: isNavigationFailure(failure), он проверит только, является ли ошибка ошибкой навигации.

NavigationFailureType

NavigationFailureType помогают разработчикам различать различные типы ошибок навигации. Существует четыре разных типа:

• redirected: next(newLocation) был вызван внутри защитного механизма навигации для перенаправления в другое место.
• aborted: next(false) был вызван внутри защитного механизма навигации для остановки навигации.
• cancelled: Новая навигация полностью произошла до завершения текущей навигации. Например, router.push был вызван во время ожидания внутри защитного механизма навигации.
• duplicated: Навигация была предотвращена, потому что мы уже находимся в целевом местоположении.

Свойства ошибок навигации

Все ошибки навигации предоставляют свойства to и from, чтобы отразить текущее местоположение, а также целевое местоположение для навигации, которая завершилась ошибкой:

// trying to access the admin page
router.push('/admin').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
    failure.to.path // '/admin'
    failure.from.path // '/'
  }
})

Во всех случаях, to и from являются нормализованными маршрутами.