Nuxt 공부 (1) - 라우팅

라우팅

Nuxt는 디렉토리 vue-router 내부에 제공된 Vue 파일을 기반으로 구성을 자동으로 생성합니다. 즉, 라우터 구성을 다시 작성할 필요가 없습니다.

1. 기본 라우트

아래의 파일트리는:

pages/
--
--| user/
----| index.vue
----| one.vue
--| index.vue

아래와 같이 자동으로 생성됩니다.:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

2. 동적 라우트

파라메터가 있는 동적 라우트를 정의하기 위해서는 앞에 밑줄이 붙은 .vue 파일이나 폴더를 정의해야 합니다.
아래의 폴더 구조는:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

아래와 같이 자동으로 생성됩니다.

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

위에서 볼 수 있듯이, users-id 라우트는 :id?라는 선택적 경로를 가집니다. 만약 이를 필수 경로로 만드려면 users/_id 폴더 안에 index.vue 파일을 만듭니다.

라우트 파라메터의 유효성 체크하기

Nuxt.js를 사용하면 동적 라우트 컴포넌트 내에 유효성을 검증하는 메소드를 정의할 수 있습니다.
예시: pages/users/_id.vue

export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

만약 validate 메소드가 true를 반환하지 않는다면 Nuxt.js는 자동으로 404 error 페이지를 로딩할 것입니다.

3. 중첩 라우트

Nuxt.js를 사용하면 vue-router의 자식 라우트를 사용함으로써 중첩 라우트를 만들 수 있습니다.
중첩 라우트의 부모 컴포넌트를 정의하기 위해서는 자식 뷰를 포함하고 있는 폴더와 같은 이름으로 Vue 파일을 생성해야 합니다.
아래의 폴더 구조는:

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

아래와 같이 자동으로 생성됩니다.

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

4. Navigation

• NuxtLink 컴포넌트를 사용해야 합니다.

  <template>
    <NuxtLink to="/">Home page</NuxtLink>
  </template>

• 다른 웹사이트에 대한 링크가 있는 경우 <a> 태그를 사용해야 합니다.

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