web-dev-qa-db-ja.com

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

Vuetifyには、メニュー、ツールバー、コンテンツ、フッターを含む非常に柔軟なレイアウトスキームがあり、見栄えの良い マテリアルデザインスキーム を使用できます。 Googleコンタクト ：

enter image description here

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

私のVueの初歩的な知識に基づいて、 スコープスロット でルーターレイアウトを定義しているようです。これを達成するためのハック方法は他にもたくさんあるでしょう。しかし、私はページ間でツールバーのコンテンツを定義するためのクリーンでモジュール化された方法を探しています。

アイデア：

  • しばらく前のvue-router 名前付きスロットはサポートされていません 。しかし、これには 最近変更された があるようですが、ドキュメントはありません。

  • 名前付きビュー は、vue-routerを使用してツールバーのコンテンツをメインページに関連付けることをサポートするための良い方法のようです。しかし、スロットの場合のように、ツールバーがメインページに「対話」するための良い方法はないようです。

vue.jsvuejs2vue-componentvue-routervuetify.js
14
Andrew Mao

アプリケーションで複数のルータービューを定義できます。レイアウトが次のように非常に簡略化されているように想像してください。

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

次に、両方のルータービューのコンポーネントを使用してルートを定義できます。

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

ドキュメント

ドキュメントからの作業例

12
ToniTornado