Vue + Vuetify + vue-router : 페이지를 기반으로 툴바 내용을 변경합니다.

Question

Vuetify는 메뉴, 툴바, 내용 및 꼬리말을 포괄하는 매우 유연한 레이아웃 체계를 가지고있어 멋지게 보일 수 있습니다. material design schemesGoogle Contacts :

레이아웃과 표준 설정을 고려는 사이트 전체 고정 메뉴 있지만 나타낸 페이지로 변하는 동적 툴바, 라우터에 의해 제어된다. 어떤 페이지가 표시되는지에 따라 툴바의 내용을 변경하는 가장 좋은 방법은 무엇입니까? Google Contacts의 예에서는 검색 창을 Contacts 페이지에만 표시하고자합니다.

내 초보적인 지식을 바탕으로 라우터 레이아웃을 scoped slot으로 정의하는 것처럼 보입니다. 이것을 달성 할 수있는 다른 해킹 방법이 많이 있습니다. 하지만 나는 페이지 전체에 툴바 콘텐츠를 정의 할 수있는 깨끗한 모듈 방식을 찾고 있습니다.

아이디어 : 얼마 전에 VUE 라우터 didn't support named slots의로

• . 그러나 이것은 문서가 없어도 changed recently 인 것으로 보입니다.

• vue-router를 사용하여 도구 모음 콘텐츠를 기본 페이지에 묶는 것을 지원하는 좋은 방법 인 것처럼 보입니다. 그러나 툴바가 슬롯과 함께 메인 페이지와 '대화'하는 좋은 방법이 아닌 것 같습니다.

Answer 1

응용 프로그램에서 여러 개의 라우터보기를 정의 할 수 있습니다. 레이아웃은 매우 이런 식으로 간단하게 보이는 상상 :

{ 
    path: '/hello', 
    components: { 
    default: MyHelloComponent, 
    navigation: MyNavigationForHelloComponent 
    } 
}