동적 라우팅 및 중첩 라우팅

 라우팅은 단순히 정적인 페이지 전환이 아니라, 동적인 페이지 전환과 중첩된 라우트를 다룰 수 있는 기능을 제공합니다. Vue Router를 사용하면 동적 라우팅과 중첩 라우팅을 쉽게 구현할 수 있습니다. 이제 동적 라우팅과 중첩 라우팅에 대해 알아봅시다.

1. 동적 라우팅

동적 라우팅은 URL에 동적인 세그먼트를 포함하여 페이지 전환을 처리하는 기능입니다. 예를 들어, 게시글의 상세 페이지를 구현하려면 게시글 식별자를 URL에 포함해야 합니다. Vue Router에서 동적 라우팅은 :id와 같은 동적 세그먼트를 사용하여 구현할 수 있습니다.

const router = new VueRouter({
  routes: [
    { path: '/post/:id', component: PostDetail }
  ]
});

위의 코드에서 /post/:id는 동적 라우팅을 정의한 예시입니다. :id는 동적인 게시글 식별자를 나타내며, 해당 URL에 접근하면 PostDetail 컴포넌트가 표시됩니다. 동적 라우팅은 URL의 일부를 변수로 사용하고, 해당 변수를 활용하여 데이터를 로드하거나 컴포넌트를 동적으로 렌더링하는 데 유용합니다.

2. 중첩 라우팅

중첩 라우팅은 여러 단계로 구성된 페이지 구조를 표현하는 기능입니다. 예를 들어, 게시판 애플리케이션에서 카테고리 페이지와 해당 카테고리에 속한 게시글 목록 페이지를 중첩하여 구현할 수 있습니다. Vue Router에서 중첩 라우팅은 children 속성을 사용하여 구현합니다.

const router = new VueRouter({
  routes: [
    {
      path: '/board',
      component: Board,
      children: [
        { path: 'category/:id', component: Category },
        { path: 'category/:id/posts', component: PostList }
      ]
    }
  ]
});

위의 코드에서 /board는 부모 라우트로 Board 컴포넌트를 나타내며, children 속성으로 중첩된 라우트를 정의합니다. /board/category/:id는 카테고리 페이지를 나타내고, /board/category/:id/posts는 해당 카테고리의 게시글 목록 페이지를 나타냅니다. 중첩 라우팅을 사용하면 페이지 구조를 계층적으로 구성하고, 각 라우트에 따라 컴포넌트를 동적으로 로드할 수 있습니다.

동적 라우팅과 중첩 라우팅은 Vue Router의 강력한 기능 중 일부입니다. 위의 내용을 참고하여 동적 라우팅과 중첩 라우팅을 구현해보세요. 이를 통해 유연하고 다양한 페이지 구조를 구현할 수 있습니다.