네임드 뷰
때때로 뷰를 중첩하는 대신 여러 뷰를 동시에 표시해야 할 때가 있습니다. 예를 들어, sidebar 뷰와 main 뷰가 있는 레이아웃을 만들 때 그렇습니다. 이럴 때 네임드 뷰가 유용합니다. 뷰에 하나의 아웃렛만 두는 대신 여러 개를 두고 각각에 이름을 지정할 수 있습니다. 이름이 없는 router-view는 default라는 이름이 자동으로 부여됩니다.
뷰는 컴포넌트를 사용하여 렌더링되므로, 여러 뷰에는 동일한 라우트에 대해 여러 컴포넌트가 필요합니다. 반드시 components(s가 붙음) 옵션을 사용해야 합니다:
이 예제의 동작하는 데모는 여기에서 확인할 수 있습니다.
중첩 네임드 뷰
네임드 뷰와 중첩 뷰를 사용하여 복잡한 레이아웃을 만들 수 있습니다. 이때, 중첩된 router-view에도 이름을 지정해야 합니다. 설정 패널 예시를 살펴보겠습니다:
Nav는 일반 컴포넌트입니다UserSettings는 부모 뷰 컴포넌트입니다UserEmailsSubscriptions,UserProfile,UserProfilePreview는 중첩 뷰 컴포넌트입니다
참고: 이러한 레이아웃을 표현하기 위한 HTML/CSS가 어떻게 생겼는지는 잠시 잊고, 사용된 컴포넌트에 집중합시다.
위 레이아웃에서 UserSettings 컴포넌트의 <template> 섹션은 다음과 비슷할 것입니다:
그런 다음 아래와 같은 라우트 설정으로 위 레이아웃을 구현할 수 있습니다:
이 예제의 동작하는 데모는 여기에서 확인할 수 있습니다.