Dev Day

Nuxt.js routing 알아보기

 

Nuxt.js의 정적 페이지와 동적 페이지 예제를 통한 그 안의 여러가지 개념들을 함께 복습 및 공부하려고 합니다.

 

프로젝트를 진행하면서 많이 사용하는 개념이기도 해서 기록겸 복습겸 쓰고 있습니다.

예제는 주로 공식문서 예제를 사용할 예정이고 필요에 따라 예제를 생성해서 작성하려 합니다.

 

역시나 제가 알고 있는 부분과 다른 내용이 있거나 수정할 부분이 있다면 댓글로 남겨주세요!

 

Routing

라우팅의 경우 기본적으로 Nuxt에선 <NuxtLink to=""></NuxtLink> 와 같이 NuxtLink 태그로 라우팅을 합니다.

기존 Vue.js 라우팅은 아래와 같이 수동으로 설정해줘야 합니다.

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 네비게이션을 위해 router-link 컴포넌트를 사용합니다. -->
    <!-- 구체적인 속성은 `to` prop을 이용합니다. -->
    <!-- 기본적으로 `<router-link>`는 `<a>` 태그로 렌더링됩니다.-->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 라우트 아울렛 -->
  <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
  <router-view></router-view>
</div>

// 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 하세요
// 그리고 `Vue.use(VueRouter)`를 호출하세요


// 1. 라우트 컴포넌트를 정의하세요.
// 아래 내용들은 다른 파일로부터 가져올 수 있습니다.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 라우트를 정의하세요.
// Each route should map to a component. The "component" can
// 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
// "component"는 `Vue.extend()`를 통해 만들어진
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체입니다.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. `routes` 옵션과 함께 router 인스턴스를 만드세요.
// 추가 옵션을 여기서 전달해야합니다.
// 지금은 간단하게 유지하겠습니다.
const router = new VueRouter({
  routes // `routes: routes`의 줄임
})

// 4. 루트 인스턴스를 만들고 mount 하세요.
// router와 router 옵션을 전체 앱에 주입합니다.
const app = new Vue({
  router
}).$mount('#app')

// 이제 앱이 시작됩니다!

예제는 Vue Router에서 가져왔습니다.

아래는 Nuxt.js의 라우팅 예제입니다.

<template>
  <main>
    <h1>Home page</h1>
    <NuxtLink to="/about">
      About (internal link that belongs to the Nuxt App)
    </NuxtLink>
    <a href="https://nuxtjs.org">External Link to another page</a>
  </main>
</template>

위에서도 말했듯이 Nuxt.js는 <NuxtLink to=""></NuxtLink> 태그를 통해 페이지내에서 라우팅이 가능합니다.

이렇게 NuxtLink 태그를 사용하면 Nuxt 프레임워크는 자동으로 라우팅을 하게됩니다.

프로젝트를 실행시키고 .nuxt 디렉토리의 router.js 파일을 보시면 아래와 같이 자동으로 라우팅이 되는 것을 확인할 수 있습니다.

Nuxt를 몰랐을 때는 Vue의 router 설정이 크게 불편하다 생각해본적은 없었는데

처음 Nuxt를 사용해보고 너무 편해서 신세계를 경험했습니다.ㅎㅎ

 

 

기본적인 라우팅에 대한 부분은 이정도이며, 실제 프로젝트 개발시 필요한 동적페이지에 대해 설명하려 합니다.

 

정적인 페이지의 경우 위 예제와 같이 <NuxtLink to=""></NuxtLink> 태그를 사용하면 페이지내에서 이동하게 됩니다.

동적인 페이지의 경우 <NuxtLink :to="`/example/${this.exampleData.id}`"></NuxtLink> 이런식으로 템플릿 리터럴로 표현하면 됩니다.

Nuxt 홈페이지에 있는 Dynamic Pages의 예제를 따라해보았습니다.

구조는 pages 아래 index.vue 와 _slug.vue 파일을 두고 _continent 디렉토리에 _mountain.vue 파일을 두는 구조입니다.

각 파일의 코드들을 보면

 

pages/index.vue

<template>
  <div>
    <ul v-for="mountain in mountains" :key="mountain.id">
      <NuxtLink :to="`${mountain.continent.toLowerCase()}/${mountain.slug}`">
        <li>{{ mountain.title }}</li>
      </NuxtLink>
    </ul>
  </div>
</template>
<script>
export default {
  async asyncData() {
    const mountains = await fetch(
      'https://api.nuxtjs.dev/mountains'
    ).then((res) => res.json())

    return { mountains }
  }
}
</script>

pages/_slug.vue

<template>
  <div>
    <h1>{{ this.slug }}</h1>
    <p>Path: {{ $route.path }}</p>
  </div>
</template>
<script>
export default {
  async asyncData({ params }) {
    const slug = params.slug
    return { slug }
  },
}
</script>

pages/_continent/_mountain.vue

<template>
  <div>
    <h1>Continent: {{ continent }}</h1>
    <h2>Mountain: {{ mountain }}</h2>
    <p>Path: {{ $route.path }}</p>
    <NuxtLink to="/">Back to Mountains</NuxtLink>
  </div>
</template>
<script>
export default {
  async asyncData({ params, redirect }) {
    const mountains = await fetch(
      'https://api.nuxtjs.dev/mountains'
    ).then((res) => res.json())

    const filteredMountain = mountains.find(
      (el) =>
        el.continent.toLowerCase() === params.continent &&
        el.slug === params.mountain
    )
    if (filteredMountain) {
      return {
        continent: filteredMountain.continent,
        mountain: filteredMountain.title
      }
    } else {
      redirect('/')
    }
  }
}
</script>

 위 예제에서는 asyncData를 사용해서 데이터를 받아오고 해당 데이터를 동적 라우팅을 통해 각 데이터에 맞는 페이지 내용을 보여주게 됩니다. 이렇게하면 같은 페이지를 반복해서 만들 필요가 없게 되며, 동적 라우팅은 개발하면서 많이 쓰기 때문에 저도 프로젝트 진행하면서 많이 사용하고 있습니다.

 

위 내용중 _.sulg.vue 파일은 해당 페이지 폴더내에 _slug.vue 파일을 생성하게 되면 params.slug와 함께 컨텍스트를 사용하여 값에 액세스 할 수 있습니다.

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // When calling /abc the slug will be "abc"
      return { slug }
    }
  }
</script>

 

저는 Nuxt.js가 제공하는 라우팅이 굉장히 큰 장점이라고 생각합니다. 개발하면서 너무 편했습니다.

앞으로 Nuxt.js를 사용하면서 장단점을 잘 파악해서 글을 작성하도록 하겠습니다.