[Nuxt3] NuxtLink

NuxtLink는 Nuxt 3에서 내부 페이지 간 네비게이션을 처리하는 컴포넌트로, 클라이언트 사이드 라우팅을 최적화하여 빠른 페이지 전환을 제공합니다. 기본적으로 Vue Router를 기반으로 동작하며, 브라우저의 전체 페이지 리로드 없이 화면을 부드럽게 전환할 수 있도록 도와줍니다.

내부 링크(Internal Link)

Nuxt 프로젝트 내에서 정의된 페이지로 이동할 때 사용됩니다.

<NuxtLink to="/dashboard">대시보드 이동</NuxtLink>

• to 속성에는 절대 경로 또는 상대 경로를 사용할 수 있습니다.

상대 경로

<NuxtLink to="settings">설정 페이지</NuxtLink>

위 코드는 현재 페이지가 /dashboard라면 /dashboard/settings로 이동합니다.

활성화된 링크 스타일 적용

NuxtLink는 현재 활성화된 링크에 자동으로 router-link-active 클래스를 추가합니다. 이를 활용하면 현재 페이지에 있는 링크를 강조할 수 있습니다.

<NuxtLink to="/dashboard" class="nav-link" active-class="active">대시보드</NuxtLink>

위와 같이 active-class="active"를 추가하면 현재 페이지가 /dashboard일 때 해당 링크에 active 클래스가 적용됩니다.

정확한 매칭을 위한 exact-active-class

Nuxt는 기본적으로 경로의 일부만 일치해도 활성화된 클래스를 적용합니다. 하지만 정확한 경로와 일치할 때만 클래스를 적용하려면 exact-active-class를 사용할 수 있습니다.

<NuxtLink to="/" exact-active-class="exact-active">홈</NuxtLink>

이렇게 하면 / 경로에 있을 때만 exact-active 클래스가 적용되며, /about 페이지에서는 적용되지 않습니다.

외부 링크(External Link)

NuxtLink는 기본적으로 내부 링크를 위한 것이지만, external 속성을 추가하면 외부 링크로 사용할 수 있습니다.

<NuxtLink to="https://example.com" external>외부 링크 이동</NuxtLink>

이 경우, 내부 라우터를 사용하지 않고 기본 브라우저 네비게이션을 사용합니다.

target 속성을 활용한 외부 링크 열기

기본적으로 NuxtLink는 같은 창에서 링크를 엽니다. 새로운 창에서 열려면 target="_blank"를 사용할 수 있습니다.

<NuxtLink to="https://example.com" external target="_blank">새 창에서 열기</NuxtLink>

동적으로 외부 링크 여부 결정

<NuxtLink :to="link" :external="isExternal">이동</NuxtLink>

• isExternal이 true이면 브라우저 기본 동작을 사용하여 새 창에서 열립니다.
• isExternal이 false이면 Nuxt 내부 라우터를 사용하여 네비게이션됩니다.

사전 로딩(Prefetching) 최적화

Nuxt는 NuxtLink를 통해 뷰포트에 들어오는 링크를 자동으로 미리 로드(Prefetching) 합니다. 이를 통해 사용자가 클릭하기 전에 해당 페이지의 데이터를 미리 가져와 빠른 전환을 가능하게 합니다. Nuxt는 브라우저가 유휴 상태(Idle)일 때만 데이터를 미리 로드하여 성능을 최적화합니다.

prefetch 기본 사용법

<NuxtLink to="/about" prefetch>소개 페이지</NuxtLink>

prefetch 비활성화

때때로 모든 링크를 미리 로드하면 불필요한 네트워크 요청이 발생할 수 있습니다. 이럴 때는 no-prefetch 속성을 설정하여 해당 링크의 자동 미리 로드를 방지할 수 있습니다.

<NuxtLink to="/dashboard" no-prefetch>대시보드 이동</NuxtLink>

프리페칭된 링크 스타일 적용

Nuxt는 미리 로드된 링크에 prefetched-class 속성을 적용할 수 있습니다. 이를 활용하면 사용자가 방문한 적 있는 링크를 스타일링할 수 있습니다.

<NuxtLink to="/about" prefetch prefetched-class="prefetched">소개 페이지</NuxtLink>

.prefetched {
  color: grey;
  opacity: 0.6;
}

custom

NuxtLink 기본적으로 <a> 태그로 렌더링되지만, custom 속성을 사용하면 내부적으로 라우팅 관련 동작만 처리하는 상태가 됩니다. 즉, 원하는 태그나 컴포넌트로 감싸서 사용할 수 있습니다.

 

<template>
  <NuxtLink to="/about" custom v-slot="{ href, navigate }">
    <button :href="href" @click="navigate">About 페이지로 이동</button>
  </NuxtLink>
</template>

 

• v-slot="{ href, navigate, isActive }"을 사용하여 커스텀 UI를 만들 수 있음.
• navigate를 @click에 바인딩하면, NuxtLink의 네비게이션 기능을 유지하면서 원하는 태그로 감쌀 수 있음.

 

 

NuxtLink 속성 정리

속성	설명	사용 예제
to	이동할 경로 설정	<NuxtLink to="/dashboard" />
external	외부 링크로 이동 시 사용	<NuxtLink to="https://example.com" external />
replace	현재 기록을 교체하여 이동 (뒤로 가기 불가능)	<NuxtLink to="/profile" replace />
prefetch	링크가 뷰포트에 있을 때 자동으로 페이지를 미리 로드	<NuxtLink to="/about" prefetch />
no-prefetch	해당 링크의 자동 프리페칭을 비활성화	<NuxtLink to="/dashboard" no-prefetch />
prefetched-class	프리페칭된 링크에 적용할 클래스	<NuxtLink to="/about" prefetch prefetched-class="prefetched" />
target	링크 열기 방식 지정 (_blank, _self)	<NuxtLink to="https://example.com" target="_blank" />
custom	<a> 태그 없이 커스텀 UI 사용	<NuxtLink v-slot="{ navigate }" custom to="/">...</NuxtLink>