<NuxtLink>

<NuxtLink> 는 Vue Router의 <RouterLink> 컴포넌트와 HTML 태그를 대체할 수 있다. <a> 링크가 내부 인지 외부 인지 지능적으로 결정하고 그에 따라 사용 가능한 최적화(프리페칭, 기본 속성 등)를 사용하여 링크를 렌더링한다.

 

내부 라우팅

이 예에서는 <NuxtLink>를 사용하여 애플리케이션의 다른 페이지에 연결한다.

<!
pages/index.vue
-->

<template>
  <NuxtLink to="/about">
    About page
  </NuxtLink>
  <!-- <a href="/about">...</a> (+Vue Router & prefetching) -->
</template>

 

외부 라우팅

이 예에서는 <NuxtLink> 컴포넌트를 사용하여 웹 사이트에 연결한다.

<!--
app.vue
-->

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

 

target 및 rel 속성

이 예에서는 <NuxtLink> 를 target, 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>

 

Props

• to: Vue Router의 모든 URL 또는 경로 위치 객체.
• href: to 의 별칭입니다 to 와 함께 사용하면 href  가 무시된다.
• target: target 링크에 적용할 속성 값.
• rel: rel 링크에 적용할 속성 값. 외부 링크의 경우 기본값은  "noopener noreferrer" 입니다.
• noRel: true 로 설정하면 링크에 rel 속성이 추가되지 않는다.
• activeClass: 액티브 링크에 적용할 클래스입니다. 내부 링크에서 Vue Router의 active-class 속성과 동일하게 작동한다 . 기본값은 Vue Router의 기본값( "router-link-active") 이다.
• exactActiveClass: 정확한 활성 링크에 적용되는 클래스입니다. 내부 링크에서 Vue Router의 exact-active-class 속성 과 동일하게 작동한다 . 기본값은 Vue Router의 기본값 "router-link-exact-active" 이다.
• replace: 내부 링크에서 Vue Router의 replace 속성과 동일하게 작동한다.
• ariaCurrentValue: aria-current 는 정확한 활성 링크에 적용할 속성 값이다. 내부 링크에서 Vue Router의 aria-current-value 속성과 동일하게 작동한다.
• external: 링크를 강제로 외부( true) 또는 내부( false)로 간주합니다. 이는 극단적인 경우를 처리하는 데 도움이된다.
• prefetchnoPrefetch : 뷰 포트에 들어가는 링크에 대해 자산 프리페치를 활성화할지 여부다.
• prefetchedClass: 프리패치된 링크에 적용할 클래스다.
• custom: <NuxtLink>콘텐츠를 <a>요소로 래핑해야 하는지 여부다. 링크가 렌더링되는 방식과 링크를 클릭할 때 탐색이 작동하는 방식을 완전히 제어할 수 있다. Vue Router의 custom 속성과 동일하게 작동한다.

 

기본값 덮어쓰기

defineNuxtLink를 사용하여 고유한 링크 컴포넌트를 만들어 <NuxtLink> 기본값을 덮어쓸 수 있다.

// components/MyNuxtLink.ts

export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* see signature below for more */
})

새 기본값을 사용하여 평소와 같이 <MyNuxtLink> 컴포넌트를 사용할 수 있다.

 

defineNuxtLink Signature

defineNuxtLink({
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  prefetchedClass?: string;
  trailingSlash?: 'append' | 'remove'
}) => Component

• componentName: 정의된 <NuxtLink> 컴포넌트의 이름이다.
• externalRelAttributerel: 외부 링크에 적용되는 기본 속성 값이다. 기본값은 "noopener noreferrer". 비활성화하려면 "" 로 설정한다 .
• activeClass: 활성 링크에 적용할 기본 클래스입니다. Vue Router의 linkActiveClass 옵션과 동일하게 작동한다 . 기본값은 Vue Router의 기본값( "router-link-active") 이다.
• exactActiveClass: 정확한 활성 링크에 적용할 기본 클래스입니다. Vue Router의 linkExactActiveClass옵션과 동일하게 작동한다 . 기본값은 Vue Router의 기본값( "router-link-exact-active") 이다.
• prefetchedClass: 프리패치된 링크에 적용할 기본 클래스다.
• trailingSlash: href 에서 후행 슬래시를 추가하거나 제거하는 옵션입니다. 설정되지 않거나 유효한 값 append 또는 remove 과 일치하지 않으면 무시된다.