Какие route-guards существуют во Vue Router?

Question

Во Vue Router существуют глобальные, маршрутные и компонентные route-guards. Они позволяют выполнять код до или после навигации. Guards используются для проверки авторизации, загрузки данных и логирования. Каждый тип применяется на своём уровне. Это основной инструмент контроля навигации.

YeaHub · Accepted Answer

Route-guards во Vue Router — это специальные хуки, которые вызываются в процессе навигации и позволяют управлять переходами между маршрутами.Глобальные guardsРаботают для всех маршрутов приложения.beforeEachВызывается перед каждым переходомМожет отменить или перенаправить навигациюbeforeResolveВызывается перед подтверждением маршрутаВсе асинхронные guards уже выполненыafterEachВызывается после завершения навигацииНе может отменять переходПример:router.beforeEach((to, from, next) => {
  next();
});
Guards на уровне маршрутаЗадаются прямо в конфигурации маршрута.{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    next();
  }
}
Используются для:защиты конкретных маршрутовизоляции логикиGuards на уровне компонентаОпределяются внутри компонента.beforeRouteEnterbeforeRouteUpdatebeforeRouteLeaveОни позволяют управлять навигацией на уровне конкретного экрана.ВыводVue Router предоставляет несколько уровней route-guards, что позволяет гибко управлять навигацией от глобальной логики до поведения отдельных компонентов.