Какой используешь Vue router?

Мой подход к работе с Vue Router

Как senior frontend-разработчик с более чем 10-летним опытом, включая 5+ лет с экосистемой Vue, я использую Vue Router как полноценный фреймворк для управления состоянием приложения, а не просто как инструмент переключения между компонентами. Вот детальный разбор моего подхода:

Архитектурная роль Vue Router

Vue Router в моих проектах выполняет несколько ключевых функций:

• Декларативная маршрутизация - определяю маршруты как конфигурацию, а не императивный код
• Централизованное управление состоянием - маршрут содержит параметры состояния приложения
• Навигационные хуки - для контроля потока данных и аутентификации
• Ленивая загрузка - критически важна для больших приложений

Конфигурация и структура

Я предпочитаю модульную структуру конфигурации маршрутизатора:

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/HomeView.vue'),
    meta: {
      requiresAuth: true,
      title: 'Главная страница'
    }
  },
  {
    path: '/projects/:id',
    name: 'ProjectDetails',
    component: () => import('@/views/ProjectDetails.vue'),
    props: true, // Автоматическое преобразование params в props
    beforeEnter: (to, from, next) => {
      // Логика проверки доступа к конкретному проекту
      if (isValidProjectId(to.params.id)) {
        next()
      } else {
        next('/not-found')
      }
    }
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // Кастомное поведение скролла
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      return { el: to.hash, behavior: 'smooth' }
    } else {
      return { top: 0 }
    }
  }
})

Ключевые практики, которые я применяю

1. Ленивая загрузка (code splitting)

Всегда разделяю приложение на чанки для оптимизации начальной загрузки:

const UserProfile = () => import(
  /* webpackChunkName: "user-profile" */ 
  '@/views/UserProfile.vue'
)

2. Глобальные навигационные хуки

Использую для централизованной обработки:

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = store.getters['auth/isLoggedIn']
  
  if (requiresAuth && !isAuthenticated) {
    next({ name: 'Login', query: { redirect: to.fullPath } })
  } else if (to.name === 'Login' && isAuthenticated) {
    next({ name: 'Home' })
  } else {
    next()
  }
})

router.afterEach((to) => {
  // Установка заголовка страницы
  document.title = to.meta.title || 'Мое приложение'
  
  // Отправка аналитики
  if (typeof gtag !== 'undefined') {
    gtag('config', 'GA_MEASUREMENT_ID', {
      page_path: to.path,
      page_title: to.meta.title
    })
  }
})

3. Типизация с TypeScript

Создаю кастомные типы для meta-полей:

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
    title?: string
    breadcrumb?: {
      title: string
      icon?: string
    }[]
  }
}

4. Динамические маршруты и вложенные роуты

Для сложных интерфейсов с вложенными представлениями:

{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    {
      path: '',
      name: 'Dashboard',
      component: DashboardOverview
    },
    {
      path: 'analytics',
      name: 'Analytics',
      component: AnalyticsView,
      children: [
        {
          path: 'realtime',
          component: RealtimeAnalytics
        }
      ]
    }
  ]
}

Продвинутые техники

Загрузка данных перед входом в маршрут

{
  path: '/article/:slug',
  component: ArticleView,
  async beforeEnter(to) {
    try {
      await store.dispatch('articles/fetchArticle', to.params.slug)
    } catch (error) {
      return { name: 'NotFound' }
    }
  }
}

Интеграция с Pinia/Vuex

import { useAuthStore } from '@/stores/auth'

router.beforeEach((to) => {
  const authStore = useAuthStore()
  
  if (to.meta.requiresAdmin && !authStore.isAdmin) {
    return { name: 'Forbidden' }
  }
})

Мониторинг и отладка

Я настраиваю дополнительное логирование для разработки:

if (import.meta.env.DEV) {
  router.onError((error) => {
    console.warn('Router error:', error.message)
  })
  
  // Логирование навигации
  router.afterEach((to, from) => {
    console.log(`Navigation: ${from.fullPath} -> ${to.fullPath}`)
  })
}

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

1. Префетчинг - использую router-link с встроенным префетчингом для видимых ссылок
2. Кэширование компонентов - комбинирую с keep-alive для таб-интерфейсов
3. Мемоизация - избегаю ререндеров при изменении query-параметров

Совместимость и особенности

В зависимости от требований проекта выбираю режим истории:

• createWebHistory - для современных SPA с поддержкой серверной конфигурации
• createWebHashHistory - для статических хостингов без серверной конфигурации
• createMemoryHistory - для тестирования и SSR

Vue Router в моей практике - это не просто библиотека для переключения страниц, а полноценный state management инструмент, который управляет важной частью состояния приложения через URL, что обеспечивает делимость ссылок, корректную работу браузерного навигации и интеграцию с аналитикой. Современная версия Vue Router 4 отлично интегрируется с Composition API и TypeScript, что позволяет создавать типобезопасные, поддерживаемые и масштабируемые решения.