[Vue] Nested Routes

vue-router에서 중첩된 routes를 만들고 싶을 때는 Nested Routes 방식을 사용할 수 있습니다.

 

아래 코드처럼 기본에 routes 설정하듯이 path와 component를 설정해 주고,

추가로 children이라는 배열을 추가해서 그 안에 동일하게 path와 component를 설정해 주면 됩니다.

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

 

여기서 주의할 점은 각 route의 경로가 부모 라우트의 경로를 기반으로 결정되기 때문에 nested routes를 사용할 때 children에 설정된 route의 path는 상대 경로로 설정하여 부모 route의 경로가 바뀌더라도 해당 부모 route 아래의 모든 중첩된 라우트의 경로가 자동으로 조정될 수 있도록 설정해야 합니다.

 

결론적으로는 Nested Routes를 사용할 때는 해당 route의 path를 상대 경로로 설정해줘야 한다.

 

그렇지 않을 경우 F12 + 콘솔에 아래와 같이 경고 문구가 뜬다.

 

그리고 해당 부모 route에 연결된 컴포넌트에 <router-view/>를 사용하면

해당 url에 접속했을 때 정상적으로 중첩된 컴포넌트가 노출됩니다.