Vue + Vuetify + vue-router：ページに基づいてツールバーの内容を変更する

Question

Vuetifyはメニュー、ツールバー、コンテンツ、およびフッターを含むかなり柔軟なレイアウトスキームを備えています。 Google Contacts：

は、レイアウトの標準設定を考えてみましょうは、サイト全体の固定メニューが、表示されるページで変化する動的ツールバーで、ルータによって制御されます。どのページが表示されているかに応じてツールバーのコンテンツを変更するためのベストプラクティスは何ですか？ Google Contactsの例では、検索バーはContactsページにのみ表示されます。

私のVueに関する初心者の知識に基づいて、scoped slotのルータレイアウトを定義しているようです。これを達成するための他の多くの方法があります。しかし、私は、ページ全体にわたってツールバーのコンテンツを定義するきれいでモジュラーな方法を探しています。

アイデア：しばらく前VUE-ルータdidn't support named slotsのよう

• 。しかし、これにはchanged recentlyがあるようですが、ドキュメントはありません。

• Named views vue-routerを使用してツールバーのコンテンツをメインページに結びつけるのに適しているようです。しかし、ツールバーがスロットを持つようにメインページと「話す」ための良い方法ではないようです。

Answer 1

アプリケーションで複数のルータビューを定義できます。

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

その後、あなたは、両方のルータビューのコンポーネントのルートを定義することができます：あなたのレイアウトは非常に、このように単純化して見えます想像

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