Плагины для роутера

Основы плагинов в Vue Router

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

Плагины полезны для:

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

Подключение плагина

Плагин подключается через метод router.use или при создании маршрутизатора с помощью опции plugins (в Vue Router версии 4 и выше):

import { createRouter, createWebHistory } from 'vue-router';
import myPlugin from './myPlugin';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
  plugins: [myPlugin]
});

Если используется функция-плагин, она принимает объект маршрутизатора как аргумент:

export default function myPlugin(router) {
  router.beforeEach((to, from, next) => {
    console.log(`Переход с ${from.fullPath} на ${to.fullPath}`);
    next();
  });
}

Типы плагинов

  1. Глобальные навигационные плагины Могут добавлять хуки beforeEach, afterEach или beforeResolve, чтобы выполнять действия при каждом переходе. Например, проверка прав пользователя или сбор статистики:
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !user.isAuthenticated) {
    next({ path: '/login' });
  } else {
    next();
  }
});
  1. Плагины для динамических маршрутов Позволяют изменять маршруты на лету, добавлять или удалять их в зависимости от состояния приложения:
router.addRoute({ path: '/dashboard', component: Dashboard });
router.removeRoute('dashboard');
  1. Интеграционные плагины Используются для связки Vue Router с Vuex, Pinia или внешними сервисами аналитики:
router.afterEach((to) => {
  analytics.trackPage(to.fullPath);
});

Структура плагина

Стандартная структура плагина включает:

  • Инициализацию: настройка необходимых данных или состояний;
  • Регистрацию хуков: внедрение навигационных хуков;
  • Расширение экземпляра маршрутизатора: добавление методов или свойств через router.app или прототип.

Пример расширения методов маршрутизатора:

export default function toastPlugin(router) {
  router.showMessage = (msg) => {
    console.log(`Сообщение: ${msg}`);
  };
  
  router.beforeEach((to, from, next) => {
    if (to.meta.showWelcome) {
      router.showMessage('Добро пожаловать на страницу!');
    }
    next();
  });
}

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

  • Использовать плагины для повторно используемой логики, чтобы не дублировать код в компонентах.
  • Для авторизации и прав доступа лучше внедрять глобальные beforeEach хуки через плагин.
  • Следить за производительностью: чрезмерное количество глобальных хуков может замедлять навигацию.
  • Разделять плагины по функциональности: один плагин — одна ответственность.

Поддержка TypeScript

Vue Router полностью совместим с TypeScript. При разработке плагинов рекомендуется типизировать аргумент router и любые добавляемые свойства:

import { Router } from 'vue-router';

export default function loggerPlugin(router: Router) {
  router.beforeEach((to, from, next) => {
    console.log(`Navigating from ${from.path} to ${to.path}`);
    next();
  });
}

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

Примеры сложных плагинов

  • Плагин с кешированием маршрутов: сохраняет данные предыдущих страниц и восстанавливает их при возврате.
  • Плагин анимации переходов: внедряет динамические CSS-классы для плавных переходов между маршрутами.
  • Плагин многоязычности: автоматически меняет путь и загружает локализованные компоненты при смене языка.

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

Оглавление