<aside> 🔖 Nuxt 파일 시스템 라우팅은 pages/ 디렉토리의 모든 파일에 대한 라우트(route)를 생성합니다.

</aside>

Nuxt의 핵심 기능 중 하나는 파일 시스템 라우터입니다. pages/ 디렉토리 내부의 모든 Vue 파일을 파일 이름을 기반으로 URL(또는 route)을 생성하며, 해당 URL에 접근했을 때 URL 매핑되는 pages/ 디렉토리 안에 있는 Vue 파일을 화면에 표시합니다. Nuxt는 각 페이지에 대한 동적 가져오기(dynamic import)를 사용하여 코드 분할(code-splitting)을 활용하여 요청된 경로에 대해 최소한의 JavaScript를 제공합니다.

Pages

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"
    }
  ]
}

페이지 컴포넌트 단일 루트 요소

페이지는 단일 루트 요소가 있어야 합니다. 주석도 요소로 간주되기 때문에 주의해야합니다.

<!-- GOOD -->
<template>
  <div>
    Page content
  </div>
</template>

<!-- BAD1 -->
<template>
  <!-- 주석이 루트 레벨에 있으면 안됨 -->
  <div>Page content</div>
</template>

<!-- BAD2 -->
<template>
  <div>This page</div>
  <div>Has more than one root element</div>
</template>

Dynamic Routes

대괄호 안에 무엇이든 넣으면 동적 경로 매개변수로 변환됩니다. 파일 이름이나 디렉터리 내에서 여러 매개 변수와 비동적 텍스트를 혼합하고 일치시킬 수 있습니다.

매개변수를 선택사항으로 지정하려면 매개변수를 이중 대괄호로 묶어야 합니다. 예를 들어 /pages/[[slug]]/index.vue 또는 /pages/[[slug]].vue는 / 그리고 /test.

동적 라우팅 예시

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

위의 예에서 $route 객체를 통해 컴포넌트 내의 group, id 동적 파라미터에 접근할 수 있습니다.