Какие знаешь хуки Vue Router

«Какие знаешь хуки Vue Router» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

beforeEach - глобальный хук, выполняется перед каждым переходом. Полезен для проверки прав доступа:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) next('/login')
  else next()
})

beforeResolve - срабатывает после подтверждения навигации, но до отрисовки компонента.

afterEach - выполняется после завершения перехода. Не имеет доступа к next().

beforeRouteEnter - хук внутри компонента, вызывается до подтверждения перехода. Нет доступа к this:

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

beforeRouteUpdate - вызывается при изменении маршрута, но для того же компонента.

beforeRouteLeave - срабатывает перед уходом с маршрута. Полезен для подтверждения выхода:

beforeRouteLeave(to, from, next) {
  if (unsavedChanges) {
    if (confirm('Есть несохраненные изменения! Выйти?')) next()
  } else next()
}