라우팅

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

페이지

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

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

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

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/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() 메서드에서 현재 라우트의 세부 정보를 접근하는 데 사용할 수 있습니다.

<script setup lang="ts">
const route = useRoute()

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

라우트 미들웨어

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

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

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

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

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

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

라우트 검증

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

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

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

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    // id가 숫자로만 이루어져 있는지 확인합니다
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  }
})
</script>