7. 라우팅

Nuxt의 핵심 기능 중 하나는 파일 시스템 라우터이다. pages/ 디렉토리 내의 모든 Vue 파일은 파일 내용을 표시하는 해당 URL(또는 경로)을 생성한다. Nuxt는 각 페이지에 대한 동적 가져오기를 사용하여 코드 분할을 활용하여 요청된 경로에 대해 최소한의 JavaScript를 제공한다.

 

Pages

Nuxt 라우팅은 vue-router를 기반으로 하며, 파일 이름을 기반으로 pages/ 디렉터리에 생성된 모든 구성 요소에서 경로를 생성한다.

 

이 파일 시스템 라우팅은 명명 규칙을 사용하여 동적 및 중첩된(nested) 경로를 생성다.

| 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> 컴포넌트는 이들 사이의 페이지를 연결한다. 페이지의 경로에 설정된 ref 속성을 사용하여 <a> 태그를 렌더링한다. 애플리케이션이 하이드레이션되면 브라우저 URL을 업데이트하여 JavaScript로 페이지 전환이 수행된다. 이렇게 하면 전체 페이지 새로 고침이 방지되고 애니메이션 전환이 가능해진다.

<NuxtLink> 가 클라이언트 측의 뷰포트에 들어가면 Nuxt는 링크된 페이지의 구성요소와 페이로드(생성된 페이지)를 자동으로 미리 가져오므로 탐색 속도가 빨라진다.

<!--
pages/app.vue
-->

<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() 컴포저블은 Vue 구성요소의 <script setup> 블록 또는 setup() 메서드 에서 사용되어 현재 경로 세부정보에 액세스할 수 있다.

<!--
pages/posts/[id].vue
-->

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

// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>

참고) Nuxt-Composables > useRoute

 

라우트 미들웨어

Nuxt는 애플리케이션 전체에서 사용할 수 있는 사용자 정의 가능한 경로 미들웨어 프레임워크를 제공하며, 이를 통해 특정 경로로 이동하기 전에 실행하려는 코드를 작성할 수 있다.

Route 미들웨어는 Nuxt 앱의 Vue 부분 내에서 실행됩니다. 비슷한 이름에도 불구하고 앱의 Nitro 서버 부분에서 실행되는 서버 미들웨어와는 완전히 다르다.

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

• 사용되는 페이지에서 직접 정의되는 익명(또는 인라인) 라우트 미들웨어다.
• middleware/ 디렉토리에 배치되고 페이지에서 사용될 때 비동기 임포트를 통해 자동으로 로드되는 명명된 라우트 미들웨어다. ( 참고 : 경로 미들웨어 이름은 kebab-case로 정규화되므로 someMiddleware 가 some-middleware 됩니다 .)
• .global 접미사와 함께 디렉터리 middleware/ 에 배치되고 경로가 변경될 때마다 자동으로 실행되는 전역 라우트 미들웨어이다.

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

// middleware/auth.ts

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

 

<!--
pages/dashboard.vue
-->

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

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

힌트) Nuxt-Directory > middleware

 

라우트 검증

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

validate 속성은 인수로 허용된다 . route부울 값을 반환하여 이 경로가 이 페이지에서 렌더링될 유효한 경로인지 여부를 결정할 수 있다. false 을 반환했는데 다른 일치 항목을 찾을 수 없으면 404 오류가 발생합니다. 오류로 즉시 응답하기 위해 statusCode / statusMessage 를 사용하여 개체를 직접 반환할 수도 있다 (다른 일치 항목은 확인되지 않음).

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

<!--
pages/posts/[id].vue
-->

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    // Check if the id is made up of digits
    return /^\d+$/.test(route.params.id)
  }
})
</script>

힌트) Nuxt-Utils> definePageMeta