Nuxt.JS - Routing

Nuxt.JS - Routing

---

---

NuxtJS에서는 라우터 연결 설정을 하나하나 해줄 필요가 없습니다.

Nuxt.js pages 디렉토리 내의 Vue 파일 구조 기반으로 vue-router 설정을 자동으로 생성합니다.

이것이 바로 NuxtJS의 장점인, Dynamic Pages 기능을 하기 때문입니다.

Vue, Nuxt에서 흥미로운 점은 페이지 컴포넌트 vue 파일 명을 지명하지않고 index.vue으로 할 경우, 해당 경로내의 / path가 되는 점입니다.

pages/index.vue pages/user/index.vue 의 두 개의 파일이 있으면 url path는 / 와 /user 경로가 됩니다.

기존의 Vue.js에서는 pages에 vue 페이지 컴포넌트를 생성하고, router.config.js에 아래와 같이 세팅하였습니다.

router: {
    routes: [
        {
            name: 'home',
            path: '/',
            component: 'pages/home.vue'
        },
        {
            name: 'user',
            path: '/user',
            component: 'page/user.vue' || 'page/user/index.vue'
        }
    ]
}

이렇게 말이죠. 하지만, Nuxt.JS에서는 VueJS의 수동적이었던 router config 세팅을 다이렉팅으로 연결해주기 때문에 귀찮아지는 일을 덜 해줍니다.

프로젝트 라우팅 샘플 코드

<template>
  <div>
    This is Index Page.
<!--
Nuxt에서는 라우터 이동할때 NuxtLink 태그를 사용하며, 경로는 pages폴더 안에 있는 `폴더명/파일명`이 경로가 된다.
ex) apple폴더안에 main.vue  localhost:8080/apple/apple
-->

    <NuxtLink to="/apple/main">
      Move to "ApplePage"
    </NuxtLink>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  layout: 'AppleLayout',
}
</script>

URL에 / 라우터로 오게되면 pages/index.vue가 나오게 됩니다.

이런식으로 page directory를 이용하여 라우터를 구성할 수 있습니다.

---

💡참고

서버를 실행하게 되면 .nuxt/ 디렉토리에서 router.js파일이 존재하는데

VueJS의 라우터 정의하는 코드를 볼 수 있습니다.

여기서 포스팅을 마치기엔 너무 짧으니 Layouts관하여 부연 설명 글을 적자면..

Layouts

NuxtJS에서는 layouts 폴더 구조가 있는데

이 default.vue라는 레이아웃 컴포넌트 Vue의 샘플 코드를 보겠습니다.

<template>
  <div>
    <Nuxt />
  </div>
</template>

<script>
export default {
  name: "default"
}
</script>

<style scoped>

</style>

이 코드 내의 <Nuxt /> 라는 태그가 있는데 <Nuxt> </Nuxt>를 줄여 표현한 것으로, VueJS에서 많이 사용했던

<router-view></router-view>태그를 의미합니다.

크롬 개발자 도구의 Vue DevTools를 확인해보면 구조가 이렇게 나오는 것을 확인할 수 있습니다.

"Layouts의 vue 컴포넌트내에 라우터를 이동 할 때마다 페이지내의 컴포넌트 Vue를 <Nuxt/>를 통해서 그려내고 있다. "라고 이해하시면 됩니다.