Опции создания роутера

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

history

Опция history определяет стратегию истории для роутера. В Vue Router 4 доступны три основных типа истории:

  1. createWebHistory() – использует HTML5 History API (pushState и replaceState). Позволяет создавать красивые URL без хэшей, например /about вместо /#/about.
  2. createWebHashHistory() – применяет хэш-стиль URL, например /#/about. Обеспечивает совместимость с серверами, которые не настроены на перехват всех маршрутов.
  3. createMemoryHistory() – работает без URL, полностью в памяти. Используется для серверного рендеринга или тестирования.

Пример использования:

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

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

routes

Опция routes представляет собой массив объектов маршрутов. Каждый маршрут описывается набором ключей:

  • path – путь маршрута, например /about.
  • name – уникальное имя маршрута, полезное при программной навигации.
  • component – компонент Vue, который рендерится при переходе на этот маршрут.
  • props – передача параметров маршрута компоненту. Может быть true, объектом или функцией.
  • children – вложенные маршруты для построения иерархии страниц.
  • redirect – перенаправление на другой путь или имя маршрута.
  • meta – объект для хранения любых пользовательских данных о маршруте.

Пример маршрута с вложенными страницами и пропсами:

const routes = [
  {
    path: '/users/:id',
    name: 'user',
    component: () => import('./components/User.vue'),
    props: true,
    children: [
      {
        path: 'profile',
        component: () => import('./components/UserProfile.vue')
      }
    ]
  },
  {
    path: '/',
    redirect: '/home'
  }
]

scrollBehavior

Опция scrollBehavior контролирует поведение прокрутки страницы при переходах между маршрутами. Функция принимает три аргумента: to, from, и savedPosition (позиция при навигации назад/вперёд). Возвращаемое значение может быть объектом с координатами { top: 0, left: 0 } или селектором.

Пример:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

linkActiveClass и linkExactActiveClass

Эти опции позволяют настраивать классы CSS, которые применяются к активным ссылкам <router-link>:

  • linkActiveClass – применяется, если путь маршрута совпадает частично.
  • linkExactActiveClass – применяется только при точном совпадении маршрута.

Пример:

const router = createRouter({
  history: createWebHistory(),
  routes,
  linkActiveClass: 'active-link',
  linkExactActiveClass: 'exact-active-link'
})

parseQuery и stringifyQuery

Эти опции позволяют управлять преобразованием query-параметров в объект и обратно. Можно заменить стандартное поведение сериализации, чтобы поддерживать кастомные форматы параметров.

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

const router = createRouter({
  history: createWebHistory(),
  routes,
  parseQuery(query) {
    return Object.fromEntries(new URLSearchParams(query))
  },
  stringifyQuery(obj) {
    return new URLSearchParams(obj).toString()
  }
})

fallback

Опция fallback используется только в createWebHistory(). Определяет поведение при отсутствии поддержки History API в браузере. Обычно по умолчанию равно true и автоматически использует хэш-маршрутизацию как запасной вариант.

strict и sensitive

  • strict – учитывает наличие или отсутствие конечного слэша в маршруте. Если true, /about и /about/ будут разными маршрутами.
  • sensitive – включает чувствительность к регистру. Если true, /About и /about будут различаться.

Пример:

const routes = [
  {
    path: '/about/',
    component: AboutPage,
    strict: true,
    sensitive: true
  }
]

Асинхронные компоненты и lazy-loading

Роутер поддерживает ленивую загрузку компонентов, что особенно важно для крупных приложений. Вместо обычного импорта компонента используется динамический import():

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

Это позволяет создавать чанки для каждого маршрута, уменьшая размер основного бандла и ускоряя загрузку.

Резюме по опциям создания роутера

Опции createRouter предоставляют полный контроль над поведением маршрутов: выбор стратегии истории, управление активными ссылками, настройка скролла, сериализация query-параметров и вложенная структура маршрутов. Правильное использование этих опций является фундаментом для построения масштабируемого и удобного навигационного интерфейса в Vue.js.

Оглавление