네스티드 라우터

네스티드 라우터는 라우터로 페이지를 이동할 때

최소 2개 이상의 컴포넌트를 화면에 나타낼수 있다.

네스티드 라우터는 상위컴포넌트 1개에

하위 컴포넌트 1개를 포함하는 구조를 갖는다.

네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의

하위 컴포넌트가 다르게 표시 된다.

먼저 간단하게 네스티드 라우터를 구현하는 소스를 보자.

먼저 10line은 User 컴포넌트가 뿌려질 영역이다.

다음 15~24line에서 User, UserPost, UserProfile 컴포넌트의

내용을 각 객체에 정의한다. 컴포넌트가 전환된 것을 알수 있게

template속성을 컴포넌트 내용에 추가했다. 여기서 봐야할 부분은

User컴포넌트의 template에 하위 컴포넌트를 표시할 <router-view>가

하나 더 있다는 부분이다.

26~38line routes에 라우터 정보를 정의한다.

먼저 path속성에 네스티드 라우터를 실행하는 기본 URL을

/user로 설정하고 상위 컴포넌트User컴포넌트로 지정한다.

다음 children속성에는 URL값 /user 다음에 올 URL에 따라 표시될

하위 컴포넌트를 정의한다. /user/post에는 UserPost를 표시한다.

41line에서 뷰라우터를 새로하나 생성하고 앞에서 정의한

라우터 정보를 담은 객체 routes를 정의한다.

다음 44line에서 인스턴스를 하나 생성하고 라우터 정보 router를 포함한다.

그리고 app라는 id를 가진 요소에 인스턴스를 붙여 화면에 나타낸다.

.$mount() API는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다.

인스턴스를 생성할 때 el속성을 넣지 않았더라도 생성하고 나서

$mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있다.

이제 소스를 실행해 어떻게 동작하는지 확인하자.

첫 화면에는 아무것도 출력되지 않는다.

아래와 같이 URL끝에 /user를 붙여준다.

/user 뒤에 /post를 붙여준다.

네스티드 라우터는 화면을 구성하는 컴포넌트의 수가

적을 때는 유용하지만 한 번에 많은 컴포넌트를 표시하는 데에는 한계가 있다.

이문제를 해결하는 방법이 네임드 뷰이다.

다음 포스팅에서 네임드 뷰에 대해 알아보겠다.