<NuxtLink>

Внутренний роутинг

В этом примере мы используем компонент <NuxtLink> для перехода на другую страницу приложения.

<template>
  <NuxtLink to="/about">
    About page
  </NuxtLink>
  <!-- <a href="/about">...</a> (+Vue Router & предварительная загрузка) -->
</template>

Передача параметров динамическим маршрутам

В этом примере мы передаем параметр id для ссылки на маршрут ~/pages/posts/[id].vue.

<template>
  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
    Post 123
  </NuxtLink>
</template>

Обработка 404

При использовании <NuxtLink> для файлов директории /public или при указании на другое приложение в том же домене, вам следует использовать входной параметр external.

Использование external приводит к тому, что ссылка рендерится как тег a вместо Vue Router RouterLink.

<template>
  <NuxtLink to="/the-important-report.pdf" external>
    Download Report
  </NuxtLink>
  <!-- <a href="/the-important-report.pdf"></a> -->
</template>

Внешняя логика применяется по умолчанию при использовании абсолютных URL-адресов и при предоставлении входного параметра target.

Внешний роутинг

В этом примере мы используем компонент <NuxtLink> для перехода по ссылке на веб-сайт.

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt website
  </NuxtLink>
  <!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
</template>

Атрибуты target и rel

Атрибут rel с noopener noreferrer применяется по умолчанию к абсолютным ссылкам и ссылкам, которые открываются в новых вкладках.

• noopener устраняет ошибку безопасности в старых браузерах.
• noreferrer улучшает конфиденциальность для ваших пользователей, не отправляя заголовок Referer на сайт, на который дана ссылка.

Эти значения по умолчанию не оказывают негативного влияния на SEO и считаются лучшей практикой.

Когда вам нужно перезаписать это поведение, вы можете использовать входные параметры rel и noRel.

<template>
  <NuxtLink to="https://twitter.com/nuxt_js" target="_blank">
    Nuxt Twitter
  </NuxtLink>
  <!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> -->

  <NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">
    Nuxt Discord
  </NuxtLink>
  <!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> -->

  <NuxtLink to="https://github.com/nuxt" no-rel>
    Nuxt GitHub
  </NuxtLink>
  <!-- <a href="https://github.com/nuxt">...</a> -->

  <NuxtLink to="/contact" target="_blank">
    Contact page opens in another tab
  </NuxtLink>
  <!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

Входные параметры

RouterLink

Если не используется external, <NuxtLink> поддерживает все входные параметры RouterLink от Vue Router

• to: Любой URL-адрес или объект расположения маршрута из Vue Router
• custom: <NuxtLink> должен обернуть свое содержимое в элемент <a>. Это позволяет полностью контролировать отображение ссылки и работу навигации при нажатии на нее. Работает так же, как и входной параметр custom у Vue Router
• exactActiveClass: Класс, который будет применяться к точным активным ссылкам. Работает так же, как и входной параметр exact-active-class у Vue Router для внутренних ссылок. По умолчанию используется значение по умолчанию от Vue Router ("router-link-exact-active")
• replace: Работает так же, как и входной параметр replace у Vue Router для внутренних ссылок
• ariaCurrentValue: Значение атрибута aria-current, которое будет применяться к конкретным активным ссылкам. Работает так же, как и входной параметр aria-current-value у Vue Router для внутренних ссылок
• activeClass: Класс, применяемый к активным ссылкам. Работает так же, как и входной параметр active-class у Vue Router для внутренних ссылок. По умолчанию используется значение по умолчанию от Vue Router ("router-link-active")

NuxtLink

• href: Алиас для to. При использовании to, href будет проигнорирован
• noRel: Если установлено в true, атрибут rel не будет добавлен к ссылке
• external: Заставляет ссылку рендериться как тег a вместо RouterLink у Vue Router.
• prefetch: Когда включено, будет выполняться предварительная загрузка middleware, layouts и payloads (при использовании payloadExtraction) ссылок в области просмотра. Используется в экспериментальной конфигурации crossOriginPrefetch.
• prefetchOn: Allows custom control of when to prefetch links. Possible options are interaction and visibility (default). You can also pass an object for full control, for example: { interaction: true, visibility: true }. This prop is only used when prefetch is enabled (default) and noPrefetch is not set.
• noPrefetch: Отключает предварительную загрузку.
• prefetchedClass: Класс, применяемый к ссылкам, которые были предварительно загружены.

Якорь

• target: Значение атрибута target, применяемое к ссылке.
• rel: Значение атрибута rel, применяемое к ссылке. По умолчанию для внешних ссылок используется "noopener noreferrer".

Перезапись значений по умолчанию

В Nuxt Config

Вы можете перезаписать некоторые значения по умолчанию для <NuxtLink> в вашем nuxt.config

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        // значения по умолчанию
        componentName: 'NuxtLink',
        externalRelAttribute: 'noopener noreferrer',
        activeClass: 'router-link-active',
        exactActiveClass: 'router-link-exact-active',
        prefetchedClass: undefined, // может быть любым допустимым строковым именем класса
        trailingSlash: undefined // может быть 'append' или 'remove'
      }
    }
  }
})

Пользовательский компонент ссылки

Вы можете перезаписать значения по умолчанию <NuxtLink>, создав свой собственный компонент ссылок с помощью defineNuxtLink.

export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* подробнее смотрите в сигнатуре ниже */
})

Затем вы можете использовать компонент <MyNuxtLink /> как обычно с вашими новыми настройками по умолчанию.

Сигнатура defineNuxtLink

interface NuxtLinkOptions {
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  trailingSlash?: 'append' | 'remove'
  prefetch?: boolean
  prefetchedClass?: string
  prefetchOn?: Partial<{
    visibility: boolean
    interaction: boolean
  }>
}
function defineNuxtLink(options: NuxtLinkOptions): Component {}

• componentName: Имя компонента. По умолчанию используется NuxtLink.
• externalRelAttribute: Значение атрибута rel по умолчанию, применяемое к внешним ссылкам. По умолчанию используется "noopener noreferrer". Установите значение "", чтобы отключить
• activeClass: Класс по умолчанию, применяемый к активным ссылкам. Работает так же, как и параметр linkActiveClass у Vue Router. По умолчанию используется значение по умолчанию от Vue Router ("router-link-active")
• exactActiveClass: Класс по умолчанию, применяемый к точным активным ссылкам. Работает так же, как и параметр linkExactActiveClass у Vue Router. По умолчанию используется значение по умолчанию от Vue Router ("router-link-exact-active")
• prefetchedClass: Класс по умолчанию, применяемый к предварительно загруженным ссылкам.
• trailingSlash: Возможность добавлять или удалять слэши в конце в href. Если значение не задано или не соответствует допустимым значениям append или remove, оно будет проигнорировано.
• prefetch: Whether or not to prefetch links by default.
• prefetchOn: Granular control of which prefetch strategies to apply by default.
• prefetchedClass: A default class to apply to links that have been prefetched.