Диагностика производительности

Vue Router является официальной библиотекой маршрутизации для Vue.js, обеспечивая возможность создания одностраничных приложений (SPA) с динамической навигацией. Основным объектом в Vue Router является Router, который содержит набор маршрутов и методы управления навигацией.

Маршрут описывается объектом вида:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/users/:id', component: User }
];
  • path — путь URL.
  • component — компонент Vue, который будет отображен при переходе.
  • Динамические сегменты (:id) позволяют обрабатывать параметры маршрута.

Создание экземпляра роутера:

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

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

Интеграция роутера в Vue-приложение:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).use(router).mount('#app');

Динамические маршруты и ленивый импорт

Для оптимизации загрузки крупных приложений применяются динамические маршруты с ленивым импортом:

const routes = [
  {
    path: '/settings',
    component: () => import('./components/Settings.vue')
  }
];

Преимущества:

  • Снижение времени первоначальной загрузки приложения.
  • Компоненты загружаются только при переходе по маршруту.

Использование именованных маршрутов облегчает навигацию:

{ path: '/profile/:id', name: 'profile', component: Profile }

Навигация по имени:

router.push({ name: 'profile', params: { id: 42 } });

Навигационные хуки

Vue Router предоставляет несколько типов хуков для контроля навигации:

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

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});
  • beforeEach — вызывается перед каждой навигацией.
  • afterEach — вызывается после завершения навигации, не поддерживает next().

Локальные хуки компонентов

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => vm.fetchData(to.params.id));
  }
}
  • beforeRouteEnter — до монтирования компонента.
  • beforeRouteUpdate — при изменении параметров маршрута.
  • beforeRouteLeave — перед уходом с маршрута, можно предотвратить переход.

Работа с параметрами и query

Динамические параметры доступны через to.params:

const userId = to.params.id;

Параметры query — через to.query:

const filter = to.query.filter;

Навигация с query-параметрами:

router.push({ path: '/users', query: { filter: 'active' } });

Методы навигации

  • router.push(location) — добавление записи в историю.
  • router.replace(location) — замена текущей записи.
  • router.go(n) — переход вперед/назад по истории.
  • router.back() / router.forward() — удобные методы для навигации по истории браузера.

Настройка переходов с анимацией

Vue Router интегрируется с компонентом для анимации переходов:
  • mode="out-in" гарантирует полное завершение ухода компонента перед входом нового.
  • Можно использовать динамическую анимацию с computed свойствами, основанными на маршрутах.

Метаданные маршрутов

Каждый маршрут может содержать объект meta, хранящий дополнительные данные:

{ path: '/admin', component: Admin, meta: { requiresAuth: true } }

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

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

Вложенные маршруты

Поддержка вложенных маршрутов позволяет создавать сложные интерфейсы:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: Overview },
      { path: 'stats', component: Stats }
    ]
  }
];
  • Компонент родителя должен содержать для отображения дочерних маршрутов.
  • Вложенные маршруты упрощают организацию интерфейса и навигацию между секциями.

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

Для больших приложений важна диагностика производительности маршрутизации:

  • Логирование времени навигации:
router.beforeEach((to, from, next) => {
  to.meta.startTime = performance.now();
  next();
});

router.afterEach((to, from) => {
  const duration = performance.now() - to.meta.startTime;
  console.log(`Navigation to ${to.fullPath} took ${duration.toFixed(2)}ms`);
});
  • Динамический импорт компонентов уменьшает первоначальный размер пакета.
  • Разделение маршрутов на чанки помогает загружать только необходимые части приложения.
  • Оптимизация с v-if или v-show для скрытия компонентов без их удаления.

Работа с историей и scrollBehavior

Для SPA важно контролировать позицию скролла при навигации:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition;
    if (to.hash) return { el: to.hash, beh * avior: 'smooth' };
    return { top: 0 };
  }
});
  • savedPosition используется при навигации назад/вперед.
  • Плавная прокрутка (beh * avior: 'smooth') улучшает UX.
  • Можно привязывать позицию скролла к состоянию компонентов для сложных страниц.

Хранение состояния маршрутов

Vue Router поддерживает хранение состояния при навигации через history.state:

router.push({ path: '/profile', state: { tab: 'settings' } });
console.log(history.state.tab); // 'settings'
  • Удобно для сохранения UI-состояния между переходами.
  • Можно комбинировать с Vuex или Pinia для централизованного управления состоянием.

Асинхронные хуки и обработка ошибок

Навигационные хуки могут возвращать промисы для асинхронных операций:

router.beforeEach(async (to, from) => {
  const authorized = await checkAuth();
  if (!authorized) return '/login';
});
  • Если возвращается путь, навигация перенаправляется автоматически.
  • Обработка ошибок через router.onError:
router.onError(error => {
  console.error('Router error:', error);
});
  • Полезно для отлова ошибок загрузки динамических компонентов.
Оглавление