Nuxt - 파일 기반 라우팅

인프런 짐코딩 강의를 수강하고 작성한 내용입니다.

Nuxt는 pages/ 디렉토리 내부의 모든 Vue 파일을 파일 이름 기반으로 url을 생성합니다. Nuxt는 각 페이지에 대해 다이나믹 로드와 코드 스플리팅을 활용하여 요청된 경로에 대해 최소한의 Javascipt를 제공합니다.

파일 기반 라우팅 실습

app.vue

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-dark text-white">
      <q-toolbar>
        <q-toolbar-title> Vue & Nuxt Mastery Class </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-page-container :style="pageContainerStyle">
      <NuxtPage />
    </q-page-container>
  </q-layout>
</template>
<script setup lang="ts">
const pageContainerStyle = computed(() => ({
  maxWidth: '1080px',
  margin: '0 auto',
}));
</script>

app.vue에서 Nuxt의 특수 컴포넌트인 NuxtPage를 template에 작성한 것을 볼 수 있습니다. 이제 특정 url에 접근 시 pages/ 폴더 하위의 경로에서 컴포넌트를 찾아, NuxtPage 컴포넌트의 위치에 그리게 됩니다.

pages/index.vue

<template lang="">
  <q-page padding>
    <div class="q-my-xl tex-center">
      <div class="text-h4">All Courses</div>
      <p class="q-mt-sm text-grey-8">웹 개발 입문부터 실전까지 학습해보세요!</p>
    </div>
    <div class="row q-col-gutter-lg">
      <div v-for="n in 3" :key="n" class="col-12 col-md-4 col-sm-6">
        <CourseCard />
      </div>
    </div>
  </q-page>
</template>
<script setup lang="ts"></script>
<style scoped></style>

root url로의 접근은 pages/index.vue 파일이 담당합니다. app.vue 파일의 NuxtPage 컴포넌트 위치에 index.vue 파일의 내용이 랜더링 됩니다.

이제, localhost:3000/about으로 접근했을 때 화면이 그려지도록 작업해 보겠습니다.

위와 같이 about.vue 파일을 생성하면, localhost:3000/about으로 접근 시 about.vue 파일이 app.vue의 NuxtPage 컴포넌트 위치에 렌더링됩니다.

about.vue

<template lang="">
  <q-page padding>
    <div class="q-my-xl tex-center">
      <div class="text-h4">All Courses</div>
      <p class="q-mt-sm text-grey-8">웹 개발 입문부터 실전까지 학습해보세요!</p>
    </div>
    <div class="row q-col-gutter-lg">
      <div v-for="n in 3" :key="n" class="col-12 col-md-4 col-sm-6">
        <CourseCard />
      </div>
    </div>
  </q-page>
</template>
<script setup lang="ts"></script>
<style scoped></style>

화면에 보여지는 결과는 아래와 같습니다.

---

주의할 점

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

<!-- 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>

응용

위와 같이 디렉토리 구조를 설정하면 localhost:3000/course로 접근 시 pages/course/index.vue의 내용이 화면에 출력됩니다.

위와 같이 잡을 경우는 localhost:3000/course/course로 접근했을 때 pages/course/course.vue의 내용이 화면에 출력됩니다.

동적 파라미터

대괄호를 사용하면 동적 파라미터 사용이 가능하며 파라미터를 선택사항으로 지정하고 싶은 경우 대괄호 두 개를 사용하면 됩니다.

[id].vue

<template lang="">
  <q-page padding>
    <h2>Course</h2>
    <div class="text-subtitle1">{{ $route }}</div>
  </q-page>
</template>
<script setup lang="ts">
const route = useRoute();
console.log(route.params.id);
</script>
<style lang=""></style>

위와 같이 디렉토리 구조를 잡고 localhost:3000/course/123 으로 접근 시, 콘솔에 123이 출력됩니다.