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

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

Синтаксис и базовое использование

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// Глобальный хук afterEach
router.afterEach((to, from) => {
  console.log(`Переход с ${from.fullPath} на ${to.fullPath} завершён`);
});

export default router;
  • to — объект маршрута назначения, который содержит информацию о новом пути, параметрах, имени маршрута и query-параметрах.
  • from — объект маршрута, с которого происходит переход.
  • afterEach не принимает next() и не может прервать навигацию, в отличие от beforeEach.

Применение после перехода

Глобальные хуки afterEach используются для:

  • Логирования действий пользователей и аналитики.
  • Управления состоянием приложения (например, снятие индикаторов загрузки).
  • Сброса состояния некоторых компонентов при смене маршрута.
  • Отправки данных в сервисы мониторинга и аналитики (Google Analytics, Яндекс.Метрика).

Пример интеграции с аналитикой:

router.afterEach((to) => {
  if (window.gtag) {
    window.gtag('config', 'UA-XXXXXX', {
      page_path: to.fullPath,
    });
  }
});

Особенности работы

  1. Не блокирует навигацию Любой код внутри afterEach выполняется после завершения навигации, и отменить её невозможно.

  2. Доступ к параметрам маршрута to.params и from.params позволяют анализировать переданные параметры. Например:

router.afterEach((to, from) => {
  if (to.params.userId) {
    console.log(`Перешли на страницу пользователя с ID: ${to.params.userId}`);
  }
});
  1. Вызов асинхронного кода В afterEach можно вызывать асинхронные функции, однако они не задерживают переход:
router.afterEach(async (to) => {
  await fetch('/api/log', {
    method: 'POST',
    body: JSON.stringify({ path: to.fullPath }),
  });
});
  1. Сочетание с другими хуками afterEach выполняется после всех beforeEach, beforeResolve и локальных хуков компонентов. Порядок выполнения гарантирован и позволяет использовать afterEach для финальных действий после навигации.

Практические рекомендации

  • Использовать для побочных эффектов, которые не влияют на навигацию напрямую.
  • Для обновления состояния UI после перехода (например, скрыть спиннер) удобно помещать соответствующие вызовы сюда.
  • В больших проектах рекомендуется централизовать работу с аналитикой через afterEach, чтобы исключить дублирование кода в компонентах.

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

import NProgress from 'nprogress';

router.beforeEach(() => {
  NProgress.start();
});

router.afterEach(() => {
  NProgress.done();
});

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

Совместимость и особенности Vue Router 4

  • Подходит для Vue 3 и Vue Router 4.
  • Не требует использования next().
  • Поддерживает все свойства объекта маршрута, включая meta, query и params.

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

Оглавление