vue-router 설정 안 해도 되는 신세계, 자동 라우팅 시스템
Nuxt 3를 처음 시작하면 가장 감탄하게 되는 기능 중 하나가 바로
**"파일 기반 자동 라우팅"**입니다.
Vue에서는 vue-router를 직접 설치하고, routes 배열을 수동으로 관리해야 했죠.
하지만 Nuxt에서는 그냥 pages/ 폴더에 .vue 파일만 만들면 끝이에요!
📁 기본 페이지 생성
위처럼 파일을 만들면 아래처럼 자동으로 라우트가 생성돼요:
| index.vue | / |
| about.vue | /about |
| contact.vue | /contact |
👆 이게 Nuxt의 자동 라우팅 시스템이에요.
⚙️ 실제 예시: about.vue
Nuxt는 이 파일을 읽고 자동으로 /about 경로를 만들어줘요.
vue-router 설정? 따로 할 필요 없어요.
🧩 동적 라우트 만들기
동적으로 변경되는 URL은 대괄호를 사용해서 정의해요.
예를 들어:
- /users/1 → id = 1
- /users/abc123 → id = abc123
🧱 중첩 라우트 구성
Nuxt는 디렉토리 구조가 곧 라우트 구조에요.
아래처럼 구성하면:
라우팅 코드를 따로 짜지 않아도
URL 구조를 디렉토리로 설계할 수 있어서 직관적이에요.
🪤 Catch-all 라우트
전체 경로를 하나로 받는 Catch-all 라우트는 [...slug].vue를 사용합니다.
이 경우 /docs/nuxt/3/start 같은 다단계 URL도 모두 이 파일 하나로 처리할 수 있어요.
🧠 라우트 메타 정보 설정 (definePageMeta)
Nuxt에서는 페이지마다 메타 정보를 간단히 설정할 수 있어요.
SEO에 중요한 title도 여기서 지정할 수 있습니다.
🔗 Nuxt 전용 링크: <NuxtLink>
Nuxt에서는 router-link 대신 **<NuxtLink>**를 사용합니다.
자동 프리페치(prefetch)도 지원해서 페이지 전환이 부드럽고 빠릅니다.
🧹 정리
| 라우트 설정 | 파일 기반 자동 생성 | routes 배열 직접 정의 |
| 동적 라우트 | [id].vue | path: '/:id' |
| 중첩 라우트 | 폴더 구조로 구성 | children 속성 사용 |
| 링크 | <NuxtLink> | <router-link> |
| 페이지 메타 | definePageMeta() | <meta> 태그 직접 조작 |
✍️ 마무리
Vue에서 복잡했던 라우팅 설정이
Nuxt 3에서는 파일만 잘 배치하면 자동으로 동작해요.
라우팅만으로도 Nuxt를 쓰는 이유가 충분하죠.
👉 다음 글에서는 SEO 설정에 대해 다뤄볼게요.
자동 생성된 페이지의 메타태그를 어떻게 설정하면 검색에 잘 노출될 수 있을까요?
댓글