Nuxt의 핵심 기능 중 하나는 파일 시스템 라우터입니다. pages/ 디렉토리 내의 모든 Vue 파일은 해당 파일의 내용을 표시하는 URL(또는 라우트)을 생성합니다. 각 페이지에 대해 동적 임포트를 사용함으로써, Nuxt는 요청된 라우트에 필요한 최소한의 JavaScript만 전송하기 위해 코드 분할을 활용합니다.

페이지

Nuxt 라우팅은 vue-router를 기반으로 하며, pages/ 디렉토리에 생성된 모든 컴포넌트의 파일명을 기반으로 라우트를 생성합니다.

이 파일 시스템 라우팅은 네이밍 규칙을 사용하여 동적 및 중첩된 라우트를 생성합니다:

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

네비게이션

<NuxtLink> 컴포넌트는 페이지 간의 링크를 제공합니다. 이는 페이지의 라우트에 설정된 href 속성을 가진 <a> 태그를 렌더링합니다. 애플리케이션이 하이드레이션되면, 페이지 전환은 브라우저 URL을 업데이트하여 JavaScript로 수행됩니다. 이는 전체 페이지 새로 고침을 방지하고 애니메이션 전환을 가능하게 합니다.

클라이언트 측에서 <NuxtLink>가 뷰포트에 들어오면, Nuxt는 링크된 페이지의 컴포넌트와 페이로드(생성된 페이지)를 미리 가져와 빠른 네비게이션을 제공합니다.

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

라우트 매개변수

useRoute() 컴포저블은 <script setup> 블록이나 Vue 컴포넌트의 setup() 메서드에서 현재 라우트의 세부 정보를 액세스하는 데 사용할 수 있습니다.

const route = useRoute()

// /posts/1에 접근할 때, route.params.id는 1이 됩니다.
console.log(route.params.id)

라우트 미들웨어

Nuxt는 애플리케이션 전반에서 사용할 수 있는 커스터마이즈 가능한 라우트 미들웨어 프레임워크를 제공합니다. 이는 특정 라우트로 이동하기 전에 실행하고자 하는 코드를 추출하는 데 이상적입니다.

라우트 미들웨어에는 세 가지 종류가 있습니다:

1. 익명(또는 인라인) 라우트 미들웨어는 사용되는 페이지에 직접 정의됩니다.
2. 이름이 지정된 라우트 미들웨어는 middleware/ 디렉토리에 배치되며, 페이지에서 사용될 때 비동기 임포트를 통해 자동으로 로드됩니다. (참고: 라우트 미들웨어 이름은 케밥 케이스로 정규화되므로, someMiddleware는 some-middleware가 됩니다.)
3. 글로벌 라우트 미들웨어는 middleware/ 디렉토리에 .global 접미사를 붙여 배치되며, 모든 라우트 변경 시 자동으로 실행됩니다.

/dashboard 페이지를 보호하는 auth 미들웨어의 예:

function isAuthenticated(): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated()는 사용자가 인증되었는지 확인하는 예제 메서드입니다.
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

라우트 유효성 검사

Nuxt는 각 페이지에서 definePageMeta()의 validate 속성을 통해 라우트 유효성 검사를 제공합니다.

validate 속성은 route를 인수로 받아들입니다. 이 페이지로 렌더링할 유효한 라우트인지 여부를 결정하기 위해 불리언 값을 반환할 수 있습니다. false를 반환하면 404 오류가 발생합니다. 또한 statusCode/statusMessage를 포함한 객체를 직접 반환하여 반환되는 오류를 커스터마이즈할 수 있습니다.

더 복잡한 사용 사례가 있는 경우, 익명 라우트 미들웨어를 대신 사용할 수 있습니다.

definePageMeta({
  validate: async (route) => {
    // id가 숫자로 구성되어 있는지 확인합니다.
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  }
})