Компонент RouterLink

Компонент RouterLink является основным инструментом для навигации между маршрутами в приложениях на Vue.js с использованием Vue Router. Он служит заменой стандартного HTML-тега <a> и интегрируется с системой маршрутизации, обеспечивая управление переходами без полной перезагрузки страницы.

Основной синтаксис

<router-link to="/home">Главная</router-link>

Атрибут to задаёт путь маршрута или объект с описанием маршрута.
В качестве значения можно использовать строку (путь) или объект с параметрами маршрута.

Пример с объектом:

<router-link :to="{ name: 'user', params: { id: 123 }}">Профиль</router-link>

name — имя маршрута, заданное в конфигурации маршрутов.
params — параметры маршрута, которые будут вставлены в путь.

Активное состояние ссылки

RouterLink автоматически добавляет CSS-класс для активного маршрута:

active-class — пользовательский класс для активной ссылки.
exact-active-class — класс для точного совпадения маршрута.

Пример:

<router-link 
  to="/about" 
  active-class="is-active" 
  exact-active-class="is-exact-active"
>
  О нас
</router-link>

По умолчанию active-class="router-link-active", exact-active-class="router-link-exact-active".
exact атрибут заставляет ссылку быть активной только при точном совпадении маршрута:

<router-link to="/home" exact>Главная</router-link>

Навигация с помощью событий

RouterLink можно использовать с событиями для дополнительной логики перед переходом:

<router-link 
  to="/dashboard" 
  @click.native.prevent="handleNavigation"
>
  Панель управления
</router-link>

.native модификатор позволяет слушать нативные события на компоненте.
.prevent предотвращает стандартное поведение браузера.
Метод handleNavigation может выполнять проверки или дополнительные действия перед навигацией.

Работа с динамическими маршрутами

Динамические маршруты используют параметры. RouterLink позволяет передавать их через объект to:

<router-link :to="{ name: 'product', params: { id: product.id }}">
  {{ product.name }}
</router-link>

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

Атрибуты и дополнительные возможности

replace — заменяет текущий маршрут в истории вместо добавления нового:

<router-link :to="/login" replace>Войти</router-link>

custom — полностью кастомизирует рендеринг ссылки, предоставляет доступ к объектам navigate и isActive:

<router-link to="/settings" custom v-slot="{ navigate, isActive }">
  <button :class="{ active: isActive }" @click="navigate">
    Настройки
  </button>
</router-link>

v-slot открывает возможности для интеграции с нестандартными элементами, такими как кнопки, карточки или меню.

Использование с модификаторами

RouterLink поддерживает встроенные модификаторы для управления поведением ссылок:

.exact — активная только при полном совпадении.
.replace — вместо добавления в историю заменяет текущий маршрут.
.append — добавляет сегмент к текущему пути.

<router-link to="profile" append>Профиль</router-link>

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

Поддержка вложенных и именованных маршрутов

Для сложных приложений RouterLink легко интегрируется с именованными маршрутами:

<router-link :to="{ name: 'dashboard', query: { tab: 'analytics' } }">
  Аналитика
</router-link>

query позволяет передавать параметры в URL после ?, например: /dashboard?tab=analytics.
Поддерживает массивы и сложные структуры для маршрутов с фильтрацией или сортировкой.

Совместимость с `<router-view>`

Компонент RouterLink работает в связке с <router-view>, обеспечивая динамическую подгрузку компонентов при смене маршрута:

<router-link to="/about">О нас</router-link>
<router-view></router-view>

При клике на ссылку соответствующий компонент загружается в <router-view> без перезагрузки страницы.
Позволяет строить SPA с динамическим контентом и плавными переходами.