Изучите Nuxt с коллекцией из 100+ советов!
54.2K

<NuxtLink>

Исходники
Nuxt предоставляет компонент <NuxtLink> для обработки любых видов ссылок в вашем приложении.
<NuxtLink> - это встроенная замена как компонента Vue Router <RouterLink>, так и HTML-тега <a>. Он умно определяет, является ли ссылка внутренней или внешней, и рендерит ее соответствующим образом с помощью доступных оптимизаций (предварительная загрузка, атрибуты по умолчанию и т.д.)

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

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

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

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

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

pages/index.vue
<template>
  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
    Post 123
  </NuxtLink>
</template>
Проверьте панель Pages в Nuxt DevTools, чтобы увидеть название маршрута и параметры, которые он может принять.

Обработка 404

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

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

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

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

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

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

app.vue
<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.

app.vue
<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

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

Скорее всего, в будущем эти параметры будут перенесены в другое место, например, в app.config или в директорию app/.
nuxt.config.ts
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.

components/MyNuxtLink.ts
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")
  • 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.
Прочитайте и отредактируйте живой пример в Docs > Examples > Routing > Pages.

<NuxtLayout>

Nuxt предоставляет компонент <NuxtLayout> для отрисовки лейаута на страницах и страницах с ошибками.

<NuxtLoadingIndicator>

Отображает индикатор выполнения постраничной навигации.