네임드 뷰

네임드 뷰(Named View)는 특정 페이지로 이동 했을 때

여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.

이전 포스티에서 알아보았던 네스티드 라우터는 아래의

이미지처럼 상위 컴포넌트가 하위 컴포넌트를 포함하는 형태이다.

하지만 네임드 뷰는 아래 이미지처럼 같은 레벨에서

여러 개의 컴포넌트를 한 번에 표시한다.

이제 간단하게 네임드 뷰 구조를 소스로 확인하자

먼저 9~13line에서는 <div>태그 안에 <router-view>를 3개 추가하고

name속성을 추가한다. 여기서 name 속성은 아래 components 속성에

정의하는 컴포넌트와 매칭하기 위한 속성이다. Header컴포넌트는 header

Footer컴포넌트는 footer를 각각 name속성에 값으로 설정한다.

다음 name속성이 없는 두 번째 <router-view>는 default로 표시될 컴포넌트를 의미한다.

이제 스크립트단을 보자 18~20line에서 Body, Header,Footer컴포넌트의

내용이 담길 객체를 선언한다. 각 컴포넌트 내용에는 컴포넌트 영역이

구분될 수 있게 template를 추가한다.

22line에서 new VueRouter()로 라우터를 하나 생성하고

라우터 정보를 정의한다.

25line에서 path는 네임드 뷰가 실행될 URL을 정의한다.

여기서는 애플리케이션이 실해되면 마주치는 기본 URL값 ' / ' 을 넣었다.

26~29line components는 앞에서 <router-view>에 정의한 name속성에 따라

표시될 컴포넌트를 정의하는 속성이다.

마지막으로 35line에서 인스턴스를 생성하고 네임드 뷰 정보를 갖고 있는

라우터를 포함한다.

아래는 실행 결과값이다.

위와같이 네임드 뷰를 활용하면 특정의 페이지로 이동했을때

해당 URL에 맞춰 여러개의 컴포넌트를 한 번에 표시할 수 있다.

*참고*

<router-view>에서 사용한 name속성은 예약어가 아니고

사용자가 임의로 정의할 수 있는 값이다.