Vue + Vuetify + vue-router: 페이지를 기반으로 도구 모음 내용 변경

Vue + Vuetify + vue-router: 페이지를 기반으로 도구 모음 내용 변경

Vuetify는 메뉴, 툴바, 컨텐츠 및 바닥글을 포함하는 매우 유연한 레이아웃 체계를 가지고 있으며, 이를 통해 Google 연락처:

레이아웃이 라우터에 의해 제어되고 사이트 전체에 고정 메뉴가 있지만 표시된 페이지에 따라 변경되는 동적 툴바가 있는 표준 설정을 검토합니다.표시되는 페이지에 따라 툴바의 내용을 변경하는 베스트 프랙티스는 무엇입니까?Google 연락처 예제에서는 검색 표시줄이 다음에만 표시되도록 합니다.Contacts페이지입니다.

Vue에 대한 기본적인 지식을 바탕으로 볼 때 스코프 슬롯을 사용하여 라우터 레이아웃을 정의하는 것 같습니다.이것을 달성하기 위한 많은 다른 뾰족한 방법들이 있을 것이다.그러나 저는 여러 페이지에 걸쳐 툴바의 콘텐츠를 정의하기 위한 깔끔하고 모듈화된 방법을 찾고 있습니다.

아이디어:

• 이전 시점에서는 vue-router는 이름 있는 슬롯을 지원하지 않았습니다.그러나 이것은 최근에 바뀐 것 같습니다만, 문서화는 되어 있지 않습니다.

• 명명된 뷰는 vue-router를 사용하여 툴바 콘텐츠를 기본 페이지에 연결할 수 있는 좋은 방법인 것 같습니다.그러나 툴바가 슬롯과 같이 메인 페이지에 '대화'할 수 있는 좋은 방법은 없는 것 같습니다.

애플리케이션에 복수의 라우터 뷰를 정의할 수 있습니다.레이아웃이 다음과 같이 매우 단순하다고 상상해 보십시오.

<v-app id="app">
  <router-view name="navigation"></router-view>
  <router-view></router-view>
</v-app>

다음으로 양쪽 라우터 뷰의 컴포넌트를 사용하여 루트를 정의할 수 있습니다.

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

문서

매뉴얼에서의 작업 예시

언급URL : https://stackoverflow.com/questions/47915016/vue-vuetify-vue-router-changing-toolbar-content-based-on-page