본문 바로가기

Web Programming/Vue.js

Vue.js + Nuxt.js로 동적 URL 페이지 만들기

Nuxt.js는 vue-router를 내장하고 있고, 매우 간편한 방식으로 라우팅을 할 수 있다.

예를 들면 아래와 같은 URL 구조를 Nuxt.js에서 구현하는 방법은 간단하다.

예시 URL 구조

  • /article  글 목록
    • /article/:id  글 보기
  • index  메인페이지
  • /user/:name  유저 정보 페이지


Nuxt.js에서 /pages 폴더 구조

  • pages/
    • article/
      • index.vue
      • _id.vue
    • user/
      • _name.vue
    • index.vue
폴더 구조만으로도 라우팅이 가능한 Nuxt.js의 장점이다.
더 자세한 내용은 공식문서에 한국어로 잘 나타나 있다. https://ko.nuxtjs.org/guide/routing/


반응형

'Web Programming > Vue.js' 카테고리의 다른 글

Vue.js 인터뷰 질문  (0) 2019.04.21
Firebase로 nuxt.js 배포하기  (0) 2019.02.07
firebase에서 nuxt.js dynamic routes 사용하기  (0) 2018.10.23