Как использовать Nuxt Link для навигации

Введение

Nuxt Link — это ключевой компонент во всех проектах на Nuxt, который обеспечивает навигацию между страницами без перезагрузки. Такой подход называется клиентской навигацией (SPA-навигация) и позволяет приложениям быть отзывчивыми, быстрыми и современными. Используя Nuxt Link, вы легко реализуете единый стиль перехода между страницами, сможете передавать параметры, работать с дополнительными настройками навигации и создавать доступные интерфейсы.

Давайте вместе разберёмся, как пользоваться Nuxt Link для базовой и продвинутой навигации в Nuxt-проектах. Я покажу вам примеры кода, объясню, как работают параметры, метки, динамические маршруты, а также расскажу, как сделать ваши ссылки ещё удобнее для пользователей.

Основные возможности компонента Nuxt Link

Как работает Nuxt Link

В первую очередь, Nuxt Link — это компонент, предназначенный для создания внутренних ссылок. Он оборачивает <a>-тег и сам обрабатывает логику навигации, используя встроенный роутер Nuxt (который основан на Vue Router). Это значит: вы используете Nuxt Link для перехода между страницами, определёнными в директории pages вашего проекта.

Давайте разберёмся на простом примере:

<template>
  <NuxtLink to="/about">
    Перейти на страницу "О нас"
  </NuxtLink>
</template>

Этот код создаёт ссылку на страницу /about. Nuxt Link автоматически обработает клик, чтобы не было полной перезагрузки страницы.

Nuxt Link — это важный компонент для создания навигации в Nuxt-приложении. Он обеспечивает плавные переходы между страницами и улучшает пользовательский опыт. Умение использовать Nuxt Link — это базовый навык для любого Nuxt-разработчика. Если вы хотите детальнее погрузиться в мир Nuxt, освоить все его тонкости и стать настоящим профессионалом — приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Отличие от обычного <a>

Вы могли бы написать просто <a href="/about">, но в таком случае произойдёт полная загрузка страницы — потеряется состояние SPA (Single Page Application). Nuxt Link решает эту проблему.

Основные параметры Nuxt Link

Давайте посмотрим, какие параметры вы можете использовать с компонентом Nuxt Link.

Параметр to

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

<NuxtLink to="/contact">
  Контактная страница
</NuxtLink>

Объектный синтаксис для передачи параметров

Если вы хотите передавать параметры или использовать именованные маршруты, используйте объект:

<NuxtLink
  :to="{
    name: 'user-id', // имя маршрута из pages/user/_id.vue
    params: { id: 42 }
  }"
>
  Профиль пользователя с id 42
</NuxtLink>

Это позволяет более гибко формировать путь и исключает ручную склейку url.

Параметр custom

Nuxt позволяет рендерить ссылку по вашему шаблону через scoped slots, используя параметр custom. Это полезно для стилизации кнопок или других интерактивных элементов.

<NuxtLink to="/dashboard" custom v-slot="{ navigate, href, isActive }">
  <button :class="{ active: isActive }" @click="navigate">
    Войти в личный кабинет
  </button>
</NuxtLink>

Здесь вы управляете внешним видом и поведением через свои элементы, но при этом получаете все плюсы Nuxt Link.

Параметр replace

Если вы хотите, чтобы переход заменял текущий адрес в истории браузера (как window.location.replace), используйте параметр replace:

<NuxtLink to="/logout" replace>
  Выйти
</NuxtLink>

Такой переход не создаёт новую запись в истории браузера.

Параметр prefetch

По умолчанию Nuxt Link автоматически предварительно подгружает страницу, на которую указывает ссылка, когда эта ссылка появляется в области видимости пользователя (lazy prefetch). Можно отключить это поведение:

<NuxtLink to="/blog" :prefetch="false">
  Статьи блога без предзагрузки
</NuxtLink>

Это уменьшает потребление трафика, если нужно.

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

Если вы используете динамические страницы (например, pages/post/_id.vue), Nuxt Link позволяет удобно указывать параметры:

<NuxtLink :to="{ name: 'post-id', params: { id: post.id } }">
  {{ post.title }}
</NuxtLink>

Имя маршрута включает структуру папки — например, для pages/post/_id.vue имя будет 'post-id'.

Добавление query-параметров

Часто бывает нужно добавить к ссылке параметры запроса:

<NuxtLink :to="{ path: '/search', query: { q: 'nuxt', page: 2 } }">
  Поиск по Nuxt (стр. 2)
</NuxtLink>

Результирующий url будет выглядеть так: /search?q=nuxt&page=2.

Навигация по якорям

Если вы используете якоря для плавного перехода по странице, Nuxt Link подерживает и это:

<NuxtLink to="#features">
  Подробнее о возможностях
</NuxtLink>

Стилизация активных ссылок

Nuxt Link автоматически добавляет CSS-класс router-link-active для активных ссылок и router-link-exact-active, если путь полностью совпадает. Вы можете использовать это в стилях:

.router-link-active {
  color: #42b983;
  font-weight: bold;
}

Это удобно для подсветки текущей страницы или раздела меню.

Передача состояния через навигацию

Иногда нужно передать дополнительную информацию при переходе. Вы можете воспользоваться state, который попадёт в history.state, но Nuxt Link по умолчанию это не поддерживает из коробки в отличие от некоторых решений (например, React Router). В этом случае распространён практический подход — добавлять параметры в query или params.

Работа с внутри циклов

Если у вас есть массив данных, легко отрисовать список ссылок на основе данных:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <NuxtLink :to="{ name: 'item-id', params: { id: item.id } }">
        {{ item.name }}
      </NuxtLink>
    </li>
  </ul>
</template>

Это делает динамические меню и списки предельно простыми.

Совместимость с SSR и SPA

Nuxt Link работает одинаково хорошо как в серверном рендеринге, так и в SPA-режиме. Если ваша страница была отрендерена на сервере, то при первом же клике Nuxt Link переключает приложение в SPA-режим.

Доступность

Nuxt Link всегда рендерит тег <a>, что обеспечивает соответствие стандартам доступности. Вы легко добавите атрибуты aria-* или tabindex:

<NuxtLink to="/profile" aria-label="Открыть профиль" tabindex="0">
  Профиль
</NuxtLink>

Обработка событий

Иногда нужна обработка события клика по ссылке, например, закрыть выпадающее меню или отправить аналитику. Можно добавить обработчик:

<NuxtLink to="/about" @click.native="handleMenuClose">
  О компании
</NuxtLink>

Обратите внимание: во Vue 3 уже не требуется .native, достаточно просто @click.

Ограничение предзагрузки для оптимизации

Если у вас на странице много ссылок и вы хотите вручную управлять, какие из них требуют префетча, используйте параметр prefetch:

<NuxtLink to="/heavy-page" :prefetch="false">
  Не подгружать тяжёлую страницу заранее
</NuxtLink>

Использование с внешними ссылками

Nuxt Link предназначен только для внутренних переходов. Внешние ссылки (на другой домен) делайте классическим <a href="http://site.com" target="_blank" rel="noopener">.

Продвинутая интеграция: Nuxt Link + slot

Если вам надо создать сложные ссылки с вложенными элементами, вы можете использовать slot:

<NuxtLink to="/news/2024">
  <strong>Все новости 2024 года</strong>
  <span class="arrow">→</span>
</NuxtLink>

Внутри ссылки вы размещаете любой HTML.

Использование scrollBehavior для плавной прокрутки

Nuxt поддерживает scrollBehavior настройку глобального роутера. Когда вы переходите по Nuxt Link, страница будет вести себя согласно scrollBehavior, например, сохранять положение страницы или скроллить к якорю.

Вы можете настроить это в nuxt.config.js:

export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition // если это нажатие "назад"
      } else if (to.hash) {
        return {
          selector: to.hash, // скроллит к якорю
          behavior: 'smooth'
        }
      } else {
        return { x: 0, y: 0 }
      }
    }
  }
}

Заключение

Nuxt Link — базовый инструмент для организации навигации в Nuxt-проектах. Используйте его для создания интуитивно понятных, быстрых и удобных интерфейсов. Он помогает избежать полной перезагрузки страницы, поддерживает передачу параметров, легко настраивается для разных ситуаций и автоматизирует многие рутинные детали. Освоив Nuxt Link, вы сможете применять его как в простых задачах (меню, ссылки, кнопки переходов), так и в сложных сценариях, например, с динамическими маршрутами, передачей query-параметров или реализацией своего шаблона ссылок.

Использование Nuxt Link — это лишь один из аспектов создания навигации в Nuxt-приложении. Чтобы создавать сложные и удобные системы навигации, необходимо также освоить другие навыки, такие как работа с роутингом, параметрами маршрутов и динамическими маршрутами. На курсе Nuxt - fullstack Vue фреймворк вы получите комплексные знания и практический опыт, необходимые для создания профессиональных систем навигации в Nuxt-приложениях. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир Nuxt прямо сегодня.

Частозадаваемые технические вопросы по теме статьи

Как задать ссылку на главную страницу с помощью Nuxt Link?

Используйте to="/":

<NuxtLink to="/">
  На главную
</NuxtLink>

Если у страницы сложная структура маршрута, указывайте имя маршрута:

<NuxtLink :to="{ name: 'index' }">
  Главная
</NuxtLink>

Как сделать переход по ссылке программно (без элемента NuxtLink)?

Вызовите метод $router.push внутри метода компонента:

this.$router.push({ name: 'profile', params: { id: 123 } })

Как открыть страницу через Nuxt Link в новой вкладке?

Nuxt Link не поддерживает открытие внутренней страницы в новой вкладке по параметру. Используйте обычный <a> с определением маршрута через $route или используйте модификатор ctrl/cmd + click, который поддерживается браузером.

<NuxtLink to="/news" target="_blank">Новости</NuxtLink>
<!-- target="_blank" не работает с Nuxt Link корректно; используйте <a>. -->

Как узнать имя маршрута для передачи в параметре name?

Имя маршрута формируется из структуры папок и файлов в директории pages. Например, файл pages/posts/_slug.vue будет иметь имя маршрута 'posts-slug'. Можно узнать список маршрутов, запустив команду nuxi dev и посмотрев структуру в консоли при запуске.

Почему не работает active класс на ссылке?

Проверьте, что путь, переданный в Nuxt Link, точно совпадает с текущим url. Класс router-link-active добавляется при совпадении маршрутов, включая вложенные пути. Если нужна точная активность, используйте exact на ссылке:

<NuxtLink to="/" exact>
  Главная
</NuxtLink>