Sobes.tech
Back to questions
Middle
5

Работал ли с Vue Router? Расскажи про хуки навигации Vue Router.

Companies where asked
Ростелеком

Answer from AI

sobes.tech AI

Vue Router предоставляет несколько хуков навигации, которые позволяют выполнять код в разные моменты жизненного цикла маршрутизации:

  • beforeEach(to, from, next) — глобальный хук, вызывается перед каждой навигацией. Можно использовать для проверки авторизации или отмены перехода.
  • beforeResolve(to, from, next) — вызывается после beforeEach и перед подтверждением навигации, полезен для асинхронных операций.
  • afterEach(to, from) — вызывается после завершения навигации, не имеет параметра next, используется для логирования или аналитики.
  • beforeEnter(to, from, next) — локальный хук, задаётся в конфигурации маршрута, срабатывает перед входом в конкретный маршрут.
  • Хуки в компонентах:
    • beforeRouteEnter(to, from, next) — вызывается перед входом в маршрут, компонент ещё не создан.
    • beforeRouteUpdate(to, from, next) — вызывается при обновлении маршрута, когда тот же компонент используется.
    • beforeRouteLeave(to, from, next) — вызывается перед уходом с маршрута.

Пример использования глобального хука:

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

Эти хуки позволяют гибко управлять навигацией, обеспечивая безопасность, загрузку данных и другие задачи.