Навигация в Nuxt 3: практический гид по компоненту NuxtLink

В современной web-разработке скорость и отзывчивость интерфейса критичны. Пользователь должен моментально переключаться между карточками клиентов, сделками и отчётами. Компонент NuxtLink в Nuxt3 позволяет достичь этого без лишних усилий — автоматически действует как клиентская навигация, предзагружает нужные данные и при этом сохраняет преимущества универсального рендеринга.

1. Замена обычных ссылок

Вместо стандартного тега  

<a href="/customers">Клиенты</a>

просто используем  

<NuxtLink to="/customers">Клиенты</NuxtLink>

Это даст нам мгновенный переход, без полной перезагрузки страницы.

2. Пример: переход к профилю клиента  

Представим, что в списке клиентов надо кликнуть и открыть карточку клиента с ID=42:  

<template v-for="client in clients" :key="client.id">
  <li>
    <NuxtLink :to="/customers/${client.id}">
      {{ client.name }}
    </NuxtLink>
  </li>
</template>

Пользователь видит список, кликает — и данные профиля подгружаются клиент‑сайд без лишних запросов.

3. Внешние ссылки и безопасность (интеграция со сторонним отчётом)  

Если нужно направить менеджера на отчёт в Google Analytics, используем NuxtLink с атрибутом external:  

<NuxtLink
  to="https://analytics.google.com/report"
  external
>
  Перейти в Analytics
</NuxtLink>

NuxtLink автоматически добавит rel="noopener noreferrer" для защиты от уязвимостей.

4. Открытие в новой вкладке (отчёты по продажам)  

Часто финансовые отчёты удобно смотреть в отдельной вкладке:  

<NuxtLink
  to="/reports/sales"
  target="_blank"
>
  Отчёт по продажам
</NuxtLink>

Браузер создаст новую вкладку, а мы при этом сохраняем внутреннюю логику RouterLink.

5. Предзагрузка страниц (быстрый доступ к профилю клиента)  

Чтобы карточка клиента 42 начала загружаться заранее, едва попав в область зрения:  

<NuxtLink
  :to="/customers/${client.id}"
  prefetch
>
  {{ client.name }}
</NuxtLink>

Эта опция включена по умолчанию. Если же в каком‑то списке вы хотите отключить предзагрузку:  

<NuxtLink :to="/customers/${client.id}" :prefetch="false">...</NuxtLink>
<!-- или -->
<NuxtLink :to="/customers/${client.id}" no-prefetch>...</NuxtLink>

Для отладки можно задать CSS‑класс префетчинга:  

<NuxtLink
  to="/customers/42"
  prefetched-class="is-prefetched"
>
  Карточка клиента
</NuxtLink>

Включайте это только в девелопменте, чтобы видеть процесс.

6. Собственный компонент‑ссылка для CRM  

Чтобы не повторять одинаковые настройки во всём проекте, можно создать компонент MyCrmLink:  

// ~/components/MyCrmLink.ts
export default defineNuxtLink({
  componentName: 'MyCrmLink',
  activeClass: 'crm-link--active',
  prefetchedClass: process.env.NODE_ENV === 'development'
    ? 'crm-link--prefetched'
    : undefined
});

Теперь везде пишем:  

<MyCrmLink to="/customers">Клиенты</MyCrmLink>

и автоматически получаем единое оформление и нужные классы.

Заключение  

NuxtLink — незаменимый инструмент для любой системы на базе Nuxt3. Он делает навигацию плавной, ускоряет доступ к важным разделам и обеспечивает безопасность при работе с внешними сервисами. Используйте готовый компонент или создайте свой на базе defineNuxtLink, чтобы навигация в вашей CRM была быстрой, удобной и единообразной.