페이지와 파일 기반 라우팅

Nuxt에서는 라우터 설정 파일을 따로 작성하지 않습니다. pages/ 폴더에 .vue 파일을 두면 그 구조 그대로 URL이 만들어집니다. 이번 레슨에서는 정적·동적·중첩·캐치올 라우트를 차례로 살펴보고, 페이지 사이를 오가는 방법까지 익힙니다.

학습 목표

• pages/ 폴더 구조가 어떻게 URL로 변환되는지 이해한다.
• 동적 라우트 [id] 와 캐치올 [...slug] 를 구분해 사용한다.
• 중첩 라우트와 <NuxtPage> 의 관계를 안다.
• NuxtLink, useRoute, navigateTo 로 페이지를 이동한다.

pages 폴더와 URL

폴더와 파일 이름이 곧 경로입니다.

pages/
├── index.vue          →  /
├── about.vue          →  /about
├── blog/
│   ├── index.vue      →  /blog
│   └── hello.vue      →  /blog/hello
└── contact/
    └── index.vue      →  /contact

index.vue 는 해당 폴더의 루트 경로를 담당합니다. app.vue 에 <NuxtPage /> 가 있어야 페이지가 그려진다는 점을 기억하세요(레이아웃 레슨에서 자세히 다룹니다).

동적 라우트 [id]

대괄호로 감싼 파일명은 동적 세그먼트 가 됩니다.

pages/
└── tasks/
    ├── index.vue      →  /tasks
    └── [id].vue       →  /tasks/42, /tasks/abc ...

<!-- pages/tasks/[id].vue -->
<script setup>
const route = useRoute();
// /tasks/42 이면 id === '42'
const id = route.params.id;

const { data: task } = await useFetch(`/api/tasks/${id}`);
</script>

<template>
  <h1>{{ task?.title }}</h1>
  <p>일감 번호: {{ id }}</p>
</template>

⚠️ 주의 — route.params 값은 항상 문자열 입니다. 숫자로 쓰려면 Number(id) 로 변환하세요.

중첩 라우트

부모 페이지 안에서 자식 페이지가 바뀌게 하려면, 부모와 같은 이름의 폴더 를 만들고 부모 컴포넌트에 <NuxtPage> 를 둡니다.

pages/
├── settings.vue        # 부모 (공통 틀)
└── settings/
    ├── profile.vue     →  /settings/profile
    └── account.vue     →  /settings/account

<!-- pages/settings.vue -->
<template>
  <div class="layout">
    <nav>
      <NuxtLink to="/settings/profile">프로필</NuxtLink>
      <NuxtLink to="/settings/account">계정</NuxtLink>
    </nav>
    <!-- 자식 페이지가 여기에 렌더링됨 -->
    <NuxtPage />
  </div>
</template>

캐치올 라우트 [...slug]

여러 세그먼트를 한꺼번에 받아야 할 때는 [...slug] 를 씁니다. 문서 사이트처럼 경로 깊이를 알 수 없을 때 유용합니다.

pages/
└── docs/
    └── [...slug].vue   →  /docs/a, /docs/a/b/c ...

<!-- pages/docs/[...slug].vue -->
<script setup>
const route = useRoute();
// /docs/guide/intro 이면 slug === ['guide', 'intro']
const slug = route.params.slug;
</script>

<template>
  <p>경로: {{ slug.join(' / ') }}</p>
</template>

404 페이지처럼 매칭되지 않는 모든 경로를 받고 싶다면 pages/[...slug].vue 를 최상위에 두면 됩니다.

페이지 이동하기

NuxtLink

내부 링크는 <a> 대신 <NuxtLink> 를 씁니다. 클라이언트 사이드 네비게이션과 프리페치를 자동으로 처리합니다.

<template>
  <NuxtLink to="/about">소개</NuxtLink>
  <NuxtLink :to="`/tasks/${task.id}`">상세 보기</NuxtLink>
</template>

navigateTo

스크립트에서 프로그래밍적으로 이동할 때는 navigateTo 를 씁니다.

async function submit() {
  await saveTask();
  // 저장 후 목록으로 이동
  return navigateTo('/tasks');
}

💡 TIP — navigateTo 는 return 으로 반환하는 것이 권장됩니다. 미들웨어나 SSR 환경에서 리디렉션이 올바르게 처리됩니다.

요약

• pages/ 폴더 구조가 그대로 URL이 됩니다.
• [id] 는 동적 세그먼트, [...slug] 는 여러 세그먼트를 받는 캐치올입니다.
• 같은 이름의 부모 페이지 + 폴더 + <NuxtPage> 로 중첩 라우트를 만듭니다.
• 이동은 NuxtLink(템플릿)와 navigateTo(스크립트)로 합니다.

연습문제

1. pages/products/[id].vue 를 만들어 /products/7 에서 상품 번호 7을 보여 주세요.
2. pages/account.vue 와 pages/account/ 폴더로 /account/info, /account/security 중첩 라우트를 구성해 보세요.
3. pages/[...slug].vue 로 정의되지 않은 모든 경로를 받아 "페이지를 찾을 수 없습니다"를 출력해 보세요.
4. 버튼 클릭 시 navigateTo 로 홈(/)으로 이동하는 페이지를 만들어 보세요.

힌트 — 동적 값은 useRoute().params 에서 읽고, 캐치올은 배열로 들어온다는 점을 떠올리세요.