[vue2/nuxt] file system routing, nested routing

0. 들어가기

-. nuxt 기반의 routing 사용 예제.

-. vue 단독 사용시와는 달라서 정리.

 

1. file system routing

-. nuxt 프레임웍 상에서 모든 페이지 경로는 pages 폴더 하에 자리하게 된다. 즉, 파일 트리가 url경로가 되고, 파일 중 index.vue 가 해당 폴더의 루트 ('/') 경로를 담당하게 된다.

pages (folder)
│  bbs.vue
│  crawl.vue
│  index.vue
│  news.vue
│  page.vue
│  prices.vue

-. 자동 작성되는 .nuxt/router.js 파일을 확인하면 아래와 같이 라우트 정의가 되어있는 것을 볼 수 있다.

  routes: [{
    path: "/bbs",
    component: _4aa0f270,
    name: "bbs"
  {
    path: "/crawl",
    component: _7a162d08,
    name: "crawl"
  }, {
    path: "/news",
    component: _0301220e,
    name: "news"
  }, {
    path: "/page",
    component: _39d0886c,
    name: "page"
  }, {
    path: "/prices",
    component: _18297f45,
    name: "prices"
  }, {
    path: "/",
    component: _1daf60a7,
    name: "index"
  }],

-. 하위 url (ex. bbs/list) routing을 위해선 bbs folder를 만들어 그 밑에 페이지.vue들을 넣어주면 된다.

pages
│  crawl.vue
│  index.vue
│  news.vue
│  page.vue
│  prices.vue
│
└─bbs
        index.vue
        list.vue
        write.vue

-. 이 경우, /bbs, /bbs/list, /bbs/write 페이지가 생성된다. *. /bbs 는 index.html 페이지가 담당함.

  routes: [{
    path: "/bbs",
    component: _cba9c68c,
    name: "bbs"
  }, {
    path: "/crawl",
    component: _7a162d08,
    name: "crawl"
  }, {
    path: "/news",
    component: _0301220e,
    name: "news"
  }, {
    path: "/page",
    component: _39d0886c,
    name: "page"
  }, {
    path: "/prices",
    component: _18297f45,
    name: "prices"
  }, {
    path: "/bbs/list",
    component: _7ff55fe6,
    name: "bbs-list"
  }, {
    path: "/bbs/write",
    component: _7679fd47,
    name: "bbs-write"
  }, {
    path: "/",
    component: _1daf60a7,
    name: "index"
  }],

2. nested routing

-. 반복되는 코드의 재사용 및 자원 효율을 높이기 위해서 중첩 라우팅 (nested routing)이 필요하고, 그러기 위해선 이전 포스트에서 작성했던 것과 같이 children route 작성이 필요하다.

-. 즉, 앞에서 page layout을 담당한 부분을 만들어줘야 하는데, 이는 간단하게 pages 디렉토리 (bbs와 동일수준)에 디렉토리와 동일한 이름의 bbs.vue 파일을 만들면 간단하게 해결된다.

pages
│  bbs.vue  bbs layout
│  crawl.vue
│  index.vue
│  news.vue
│  page.vue
│  prices.vue
│
└─bbs
        index.vue
        list.vue
        write.vue

  routes: [{
    path: "/bbs",
    component: _4aa0f270,
    children: [{
      path: "",
      component: _cba9c68c,
      name: "bbs"
    }, {
      path: "list",
      component: _7ff55fe6,
      name: "bbs-list"
    }, {
      path: "write",
      component: _7679fd47,
      name: "bbs-write"
    }]
  }, {
    path: "/crawl",
    component: _7a162d08,
    name: "crawl"
  }, {
    path: "/news",
    component: _0301220e,
    name: "news"
  }, {
    path: "/page",
    component: _39d0886c,
    name: "page"
  }, {
    path: "/prices",
    component: _18297f45,
    name: "prices"
  }, {
    path: "/",
    component: _1daf60a7,
    name: "index"
  }],