|
| 1 | +# Сбои при навигации |
| 2 | + |
| 3 | +> Добавлено в версии 3.4.0 |
| 4 | +
|
| 5 | +При использовании `router-link` Vue Router вызывает `router.push` для запуска навигации. В большинстве случаев ожидаемое поведение ссылок заключается в переходе на новую страницу, но есть несколько ситуаций при которых пользователь остаётся на той же странице: |
| 6 | + |
| 7 | +- Пользователь уже находится на странице, на которую пытается перейти |
| 8 | +- [Навигационный хук](./navigation-guards.md) прерывает навигацию вызовом `next(false)` |
| 9 | +- [Навигационный хук](./navigation-guards.md) выбрасывает ошибку или вызывает `next(new Error())` |
| 10 | + |
| 11 | +При использовании компонента `router-link` **ни один из этих случаев не будет логироваться как ошибка**. Однако при использовании `router.push` или `router.replace` можно столкнуться с сообщением _"Uncaught (in promise) Error"_ после которого в консоли последует более конкретное сообщение. Давайте разберемся как отличать _сбои навигации_. |
| 12 | + |
| 13 | +::: tip История вопроса |
| 14 | +В версии 3.2.0, _навигационные сбои_ доступны через два необязательных коллбэка `router.push`: `onComplete` и `onAbort`. Начиная с версии 3.1.0, `router.push` и `router.replace` возвращают _Promise_ если не указаны коллбэки `onComplete`/`onAbort`. Этот _Promise_ разрешается вместо вызова `onComplete` и отклоняется вместо вызова `onAbort`. |
| 15 | + ::: |
| 16 | + |
| 17 | +## Обнаружение сбоев навигации |
| 18 | + |
| 19 | +_Сбой навигации_ будет экземпляром `Error` с парой дополнительных свойств. Проверить произошла ли ошибка в маршрутизаторе можно с помощью функции `isNavigationFailure`: |
| 20 | + |
| 21 | +```js |
| 22 | +import { NavigationFailureType, isNavigationFailure } from 'vue-router' |
| 23 | + |
| 24 | +// попытка перехода к странице администрирования |
| 25 | +router |
| 26 | + .push('/admin') |
| 27 | + .catch(failure => { |
| 28 | + if (isNavigationFailure(failure, NavigationFailureType.redirected)) { |
| 29 | + // отображение уведомления пользователю |
| 30 | + showToast('Необходимо авторизоваться для доступа к панели администрирования') |
| 31 | + } |
| 32 | + }) |
| 33 | +``` |
| 34 | + |
| 35 | +::: tip СОВЕТ |
| 36 | +Если опустить второй параметр в `isNavigationFailure(failure)`, то будет проверяться только, является ли ошибка _сбоем навигации_. |
| 37 | +::: |
| 38 | + |
| 39 | +## Тип `NavigationFailureType` |
| 40 | + |
| 41 | +Тип `NavigationFailureType` поможет разработчикам определять тип _навигационного сбоя_. Существует 4 различных типа: |
| 42 | + |
| 43 | +- `redirected`: внутри навигационного хука был вызван `next(newLocation)` для перенаправления в другое место. |
| 44 | +- `aborted`: внутри навигационного хука был вызван `next(false)` для отмены навигации. |
| 45 | +- `cancelled`: произошла полностью новая навигация до того, как текущая могла закончиться. Например, во время ожидания внутри навигационного хука был вызван `router.push`. |
| 46 | +- `duplicated`: навигация была предотвращена, потому что уже находимся в месте назначения. |
| 47 | + |
| 48 | +## Свойства _ошибок навигации_ |
| 49 | + |
| 50 | +Все сбои навигации предоставляют доступ к свойствам `to` и `from`, чтобы отобразить текущее местоположение, а также местоположение места назначения для навигации, в которой произошёл сбой: |
| 51 | + |
| 52 | +```js |
| 53 | +// попытка получения доступа к странице администрирования |
| 54 | +router |
| 55 | + .push('/admin') |
| 56 | + .catch(failure => { |
| 57 | + if (isNavigationFailure(failure, NavigationFailureType.redirected)) { |
| 58 | + console.log(failure.to.path) // '/admin' |
| 59 | + console.log(failure.from.path) // '/' |
| 60 | + } |
| 61 | + }) |
| 62 | +``` |
| 63 | + |
| 64 | +Во всех случаях значения `to` и `from` будут объектами нормализованных маршрутов. |
0 commit comments