Skip to content

Latest commit

 

History

History
133 lines (97 loc) · 9.44 KB

navigation-guards.md

File metadata and controls

133 lines (97 loc) · 9.44 KB

Сторожевые хуки

Как следует из названия, сторожевые хуки Vue-router используются для редиректов или отмены навигационных переходов. Есть несколько способов внедрить сторожевой хук: глобально, для конкретного пути, или для конкретного компонента.

Следует помнить, что изменение параметров маршрута не вызывает выполнения сторожевых хуков enter/leave. Вы можете добавить watch на объект $route для отслеживания этих изменений, или использовать хук beforeRouteUpdate.

Глобальные хуки

Глобальный хук можно зарегистрировать через router.beforeEach:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

Глобальные сторожевые хуки вызываются в порядке создания при каждом навигационном переходе. Допускается асинхронное разрешение хуков — в этом случае переход считается незавершённым до тех пор, пока не будут разрешены все хуки.

В каждый сторожевой хук передаётся три параметра:

  • to: Route: целевой объект Route, к которому осуществляется переход.

  • from: Route: текущий путь, с которого осуществляется переход к новому.

  • next: Function: функция, вызов которой разрешает хук. В зависимости от переданных в next аргументов, результатом будет:

    • next(): переход к следующему хуку в цепочке. Если хуков больше нет, переход считается подтверждённым.

    • next(false): отмена перехода. Если URL был изменён (вручную пользователем, или кнопкой "назад"), он будет сброшен на соответствующий пути from.

    • next('/') или next({ path: '/' }): перенаправление на другой путь. Текущий переход будет отменён, и процесс начнётся заново для нового пути. Вы можете передать любой объект местоположения в next, который позволяет вам указывать опции такие как replace: true, name: 'home' и любой другой параметр используемый во входном параметре to компонента router-link или router.push

    • next(error): (добавлено в версии 2.4.0+) если аргумент, переданный next является экземпляром Error, навигация будет прервана и ошибка будет передана в коллбек, зарегистрированный через router.onError().

Удостоверьтесь, что функция next так или иначе будет вызвана, иначе хук никогда не будет разрешён.

Глобальные хуки разрешения перехода

Добавлено в версии 2.5.0

В 2.5.0+ вы можете зарегистрировать глобальный хук с помощью router.beforeResolve. Это похоже на router.beforeEach, с той разницей, что разрешающий хук будет вызван непосредственно перед подтверждением навигации, после того, как будут разрешены все хуки компонента и асинхронные компоненты для маршрута.

Глобальные хуки завершения перехода

Можно также зарегистрировать глобальные хуки, вызываемые после завершения перехода. Однако, в отличие от сторожевых хуков, в них не передаётся функция next, и на ход перехода они повлиять не могут:

router.afterEach((to, from) => {
  // ...
})

Указание хука для конкретного пути

Сторожевые хуки beforeEnter можно указать напрямую для конкретного пути в его конфигурации:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Эти хуки ничем не отличаются от глобальных.

Указание хука для конкретного компонента

Наконец, сторожевой хук можно указать и непосредственно в компоненте (том, что указан в конфигурации пути), используя следующие опции:

  • beforeRouteEnter
  • beforeRouteUpdate (добавлено в версии 2.2+)
  • beforeRouteLeave
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // вызывается до подтверждения пути, соответствующего этому компоненту.
    // НЕ имеет доступа к контексту экземпляра компонента `this`,
    // так как к моменту вызова экземпляр ещё не создан!
  },
  beforeRouteUpdate (to, from, next) {
    // вызывается когда маршрут, что рендерит этот компонент изменился,
    // но этот компонент будет повторно использован в новом маршруте.
    // Например, для маршрута с динамическими параметрами `/foo/:id`, когда мы
    // перемещаемся между `/foo/1` и `/foo/2`, экземпляр того же компонента `Foo`
    // будет использован повторно, и этот хук будет вызван когда это случится.
    // Также имеется доступ в `this` к экземпляру компонента.
  },
  beforeRouteLeave (to, from, next) {
    // вызывается перед переходом от пути, соответствующего текущему компоненту;
    // имеет доступ к контексту экземпляра компонента `this`.
  }
}

Хук beforeRouteEnter НЕ имеет доступа к this, так как к моменту его вызова навигация ещё не подтверждена, а значит и экземпляр компонента ещё не создан.

Тем не менее, доступ к экземпляру можно получить, передав коллбэк в next. Эта функция будет вызвана после подтверждения навигации, а экземпляр компонента будет передан в неё в качестве параметра:

beforeRouteEnter (to, from, next) {
  next(vm => {
    // экземпляр компонента доступен как `vm`
  })
}

Внутри beforeRouteLeave можно обращаться к this напрямую. Этот сторожевой хук обычно используется для предотвращения случайного ухода пользователя с пути, содержащего несохранённые отредактированные данные. Переход можно отменить, вызвав next(false).

Полная цепочка обработки навигации

  1. Срабатывание навигации.
  2. Вызов leave-хуков в деактивируемых компонентах.
  3. Вызов глобальных beforeEach хуков.
  4. Вызов beforeRouteUpdate хука в переиспользуемых компонентах (2.2+).
  5. Вызов beforeEnter в конфигурации маршрута.
  6. Разрешение асинхронных компонентов для маршрута.
  7. Вызов beforeRouteEnter в активируемых компонентах.
  8. Вызов глобальных beforeResolve хуков (2.5+).
  9. Навигация подтверждена.
  10. Вызов глобальных afterEach хуков.
  11. Выполняется обновление DOM.
  12. Вызов коллбэков, переданных в next в beforeRouteEnter хуке с созданными экземплярами.