Ch 04. NuxtLink와 네비게이션

페이지를 만들었다면 이제 페이지 사이를 이동하는 방법이 필요합니다. HTML의 <a> 태그를 그냥 써도 되지 않을까 싶지만, Nuxt.js 앱에서는 <NuxtLink> 컴포넌트를 사용하는 것이 훨씬 좋습니다.

NuxtLink vs a 태그

<a> 태그로 링크를 걸면 브라우저가 새 페이지를 완전히 불러옵니다. 서버에 요청을 보내고, HTML을 다시 파싱하고, JavaScript를 다시 실행합니다. 앱이 잠깐 하얗게 되면서 깜빡이는 현상이 생기고, 로딩 시간도 길어집니다.

<NuxtLink>는 클라이언트 사이드 라우팅을 사용합니다. 페이지 전체를 다시 불러오지 않고 변경된 부분만 교체합니다. 화면 전환이 즉각적이고 부드럽습니다. 여기에 더해 뷰포트 안에 들어온 링크의 목적지를 미리 불러오는 프리페칭(prefetch) 기능도 작동합니다. 링크 위에 마우스를 올리기도 전에 이미 데이터를 준비해두는 것입니다.

외부 URL(http://로 시작하는 경우)은 자동으로 <a> 태그로 렌더링되므로 상황에 따라 구분해서 쓸 필요가 없습니다.

기본 사용법

<template>
  <nav>
    <NuxtLink to="/">홈</NuxtLink>
    <NuxtLink to="/about">소개 페이지</NuxtLink>
    <NuxtLink :to="{ name: 'blog-id', params: { id: 1 } }">게시글</NuxtLink>
  </nav>
</template>

to 속성에 문자열로 경로를 주거나, 객체 형태로 라우트 이름과 파라미터를 지정할 수 있습니다. 라우트 이름은 파일 경로에서 자동 생성됩니다. pages/blog/[id].vue의 라우트 이름은 blog-id가 됩니다.

현재 페이지 강조

<NuxtLink>는 현재 경로와 일치할 때 자동으로 CSS 클래스를 추가합니다. 기본 클래스는 router-link-active(경로 포함 일치)와 router-link-exact-active(완전 일치)입니다. 이 클래스에 스타일을 적용하면 현재 페이지 링크를 강조할 수 있습니다.

.router-link-exact-active {  font-weight: bold;  color: #00dc82;}

프로그래밍 방식 이동

버튼 클릭이나 폼 제출 후 코드로 페이지를 이동해야 할 때는 useRouter()를 사용합니다.

const router = useRouter()// 새 항목을 히스토리에 추가하며 이동합니다.router.push('/dashboard')// 현재 항목을 교체하며 이동합니다. (뒤로 가기 불가)router.replace('/login')// 이전 페이지로 돌아갑니다.router.back()

push()는 브라우저 히스토리에 새 항목을 쌓으므로 뒤로 가기 버튼으로 이전 페이지로 돌아올 수 있습니다. replace()는 현재 히스토리 항목을 교체하므로 로그인 페이지처럼 뒤로 가기를 막고 싶을 때 활용합니다.