Ответ
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()
}Ответ 18+ 🔞
А, ну ты глянь, какие приколы с навигацией во Vue Router! Это ж целый цирк хуков, блядь, как в театре абсурда. Сейчас разберём, кто за что отвечает, а то голова кругом идёт.
Вот смотри, 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 — это когда ты уже внутри квартиры, но маршрут поменялся. Например, ты смотришь профиль пользователя с id=1, а потом переключился на id=2. Компонент тот же самый, но параметры другие. Этот хук позволяет данные подгрузить заново, не пересоздавая всю хуйню.
Ну и король всех хуков — beforeRouteLeave. Это когда ты собрался уходить, а компонент тебя хватает за рукав и орет: «Стой, мудак! Ты форму не сохранил, всё пропадёт!». Идеально для подтверждения выхода.
beforeRouteLeave(to, from, next) {
if (unsavedChanges) {
if (confirm('Есть несохраненные изменения! Выйти?')) next()
} else next()
}Вот такая, блядь, хитрая жопа с навигацией. Сначала кажется, что овердохуища всего, но если разложить по полочкам — жить можно. Главное — не запутаться, а то получится мартышлюшка с гранатой.