Nuxt 파일 라우팅

파일 라우팅이란?

• Nuxt는 파일 트리 구조를 기반으로 vue-router를 자동 생성해 줌

정적 경로 라우팅 파일 구조

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

이런 파일 구조를 가졌을 시 Nuxt에서 자동 변경된 vue-router

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'
    }
  ]
}

동적 경로 라우팅 파일 구조

• 파일 명에 _를 붙여서 사용함

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

이런 파일 구조를 가졌을 시 Nuxt에서 자동 변경된 vue-router

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'
    }
  ]