<aside> 🔖 Nuxt는 애플리케이션 내의 모든 종류의 링크를 처리할 수 있는 <NuxtLink> 컴포넌트를 제공합니다.

</aside>

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

Internal Routing

이 예에서는 <NuxtLink> 컴포넌트를 사용하여 애플리케이션 내부의 다른 페이지에 연결합니다.

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

External Routing

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

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

• a 태그의 rel 속성

실습 - <RouterLink> vs <NuxtLink>

• pages/about.vue

실습 - Header에 <NuxtLink custom /> 적용

• layouts/default.vue

<NuxtLink> Prefetching

Nuxt 3에서의 Prefetching은 웹 페이지를 로드하는 동안 브라우저가 미리 필요한 데이터를 미리 가져와서 사용자 경험을 최적화하는 기술입니다. 이 기능은 페이지를 방문하기 전에 해당 페이지에 필요한 리소스를 미리 가져와서 사용자가 실제로 그 페이지로 이동할 때 로딩 시간을 단축시킵니다.