[Udemy Vue 완벽가이드 Section13] 179. 중첩 라우트 사용하기

router에 route를 설정할 때, 구성할 수 있는 사항은 다양하다.

 

예를 들어, 중첩 라우트와 같은 유용한 기능이 있다.

일부 애플리케이션에서 라우터 안에 또 다른 라우터를 설정하고 싶을 수 있다.

 

예시를 보자.

팀원 정보를 개별 페이지에서 로드할 수 없다고 가정해보자.

대신 'View Members'버튼을 클릭하면 선택한 팀의 팀원 정보를 팀 목록 위에 띄우려고 한다.

이를 위해 같은 페이지에 선택한 팀원 정보를 임베딩하자.

Vue 라우터를 이용하면 구현할 수 있는 작업이다.

 

여기 팀원 정보를 로드하는 라우트가 준비되어 있다.

{ path: '/teams/:teamId', component: TeamMembers, props: true }

 

현재는 /teams 라우트와 같은 '개별 라우트'로서 모든 라우트가 있는 루트 레벨에 속한다.

여기 있는 라우트들은 모두 같은 레벨에 속하며 형제 관계이다.

  routes: [
    { path: '/', redirect: '/teams' },
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
    { path: '/teams/:teamId', component: TeamMembers, props: true },
    { path: '/:notFound(.*)', component: NotFound },
  ],

 

 

 

# 중첩 라우트 설정방법 - children옵션

중첩 라우트 구성은, children옵션을 추가하는 방법으로 중첩 라우트를 설정하면 된다.

children옵션은 배열을 취하며, 해당 배열에는 라우트가 있다.

그러므로 routes에 설정한 동일한 라우트를 children 옵션에 추가한다.

'/teams'라우트는 '/teams/:teamId'라우트를 취하게 되니 '/teams'라우트로 옮기자.

  routes: [
    { path: '/', redirect: '/teams' },
    { path: '/teams', component: TeamsList, children: [
      { path: ':teamId', component: TeamMembers, props: true },
    ] },
    { path: '/users', component: UsersList },
    { path: '/:notFound(.*)', component: NotFound },
  ],

 

이제 '/teams'라우트에는 자식 라우트인 '/teams/:teamId'가 생겼다.

전체 경로를 중복해서 작성할 필요가 없으므로, /teams 뒤에 따라올 세그먼트인 ':teamId'만 작성하자.

 

자식 라우트로 더 많은 라우트를 추가할 수 있다.

'/teams' 내부에 중첩할 라우트가 여러개 있다면 당연히 children옵션에 추가할 수 있다.

 

그렇다면 중첩 라우트를 갖는 것과는 어떤 차이가 있을까?

 

작업을 저장하고 'View Members'버튼을 클릭하면, 이제 더는 TeamMembers 라우트를 로드하지 않는다는 차이가 있다.

이유는 Vue 라우터가 어디로 로드할지 모르기 때문.

children옵션에 설정한 TeamMembers 라우트는 더이상 루트 라우트가 아니며, routes에 직접 등록되어 있지 않다.

다른 라우트의 자식 라우트로서 작동한다.

 

 

App.vue 파일에 사용한 <router-view> 컴포넌트는 앱 전체에 사용하는 최상단의 router-view 컴포넌트로 오직 루트 라우트만 다룬다. 즉, routes 배열에 직접적으로 등록한 라우트만 다룬다.

그러므로 자식 라우트는 이 router-view에 렌더링 되지 않는다.

<!--App.vue-->
<template>
  <main>
    <router-view></router-view>
  </main>
</template>

 

children옵션에 설정한 라우트는 자식 컴포넌트로 정의한 부모 컴포넌트에 router-view를 추가해야한다. 이 경우에는 부모 컴포넌트인 TeamsList 컴포넌트가 된다.

  routes: [
    { path: '/teams', component: TeamsList, children: [
      { path: ':teamId', component: TeamMembers, props: true },
    ] },
  ],

TeamsList 컴포넌트가 자식 라우트를 갖는 컴포넌트이므로.

그러므로 TeamsList 컴포넌트에 자식 라우트를 위한 router-view를 추가로 작성해야한다.

 

TeamsList.vue 파일에서 ul 위에 또다른 router-view를 추가할 수 있다.

이 <router-view>는 TeamsList 컴포넌트의 라우트가 가진 모든 자식 라우트에게 매우 중요한 요소이다.

// TeamsList.vue
<template>
  <router-view></router-view>
  <ul>
    <teams-item
      v-for="team in teams"
      :key="team.id"
      :name="team.name"
      :member-count="team.members.length"
      :id="team.id"
    ></teams-item>
  </ul>
</template>

 

 

다시 Teams 페이지로 가서 새로고침하면 localhost:8080/teams에 접속한 후 'View Members'를 클릭하면 해당 팀의 팀원 정보가 위에 뜬다. 그리고 URL도 'localhost:8080/teams/t2' 이렇게 변경된다.

다른 팀을 클릭하면 상단의 팀원 정보가 업데이트된다.

 

 

여기까지 중첩 라우트라는 유용한 기능을 살펴봤다.

중첩 라우트를 사용하면 URL이 중첩된 라우트로 바뀌는 걸 확인할 수 있다. 하지만 Teams 버튼은 여전히 강조 표시되어 있다.

 

이전에는 강조 표시가 되어있지 않았다.

아래와 같이 '/teams/:teamId'가 분리된 루트 라우트로서, '/teams' 라우트와 형제 관계였을 때는 이 라우트가 /teams로 시작한다 하더라도 'Teams' 버튼이 강조처리되지 않았다.

  routes: [
    { path: '/teams', component: TeamsList },
    { path: '/teams/:teamId', component: TeamMembers, props: true },
  ],

 

왜냐하면 active 클래스는 현재 로드된 경로가 링크가 가리키는 경로와 관련이 있을 때만 적용되니까.

Teams버튼의 링크는 '/teams'를 가리키고, 이제 '/teams/t1'은 이 /teams 라우트의 중첩 라우트니까 중첩 라우트가 활성화될때마다 이 버튼의 링크도 활성화된 것으로 간주한다.

그래서 css클래스인 active를 사용한 것. 하지만 중첩 라우트에 대해 참고만 해라.

* 노트 : router-link-exact-active는 <a>요소에 추가하지 않는다. 전체 경로가 일치하는 경우에만 적용하는 사항이다.

 

중첩 라우트는 여러 부분을 로드하는 복잡한 사용자 인터페이스를 구축할 때 상당히 유용하게 쓰일 수 있다.

여러 URL과 경로의 다양한 컴포넌트에 중첩된 부분을 로드할 때.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.