Vue + Vuetify + vue-router: Ändern des Symbolleisteninhalts basierend auf Seite

Question

Vuetify hat ein ziemlich flexibles Layoutschema, das ein Menü, eine Symbolleiste, einen Inhalt und eine Fußzeile umfasst, die einige gut aussehende material design schemes, z. Google Contacts:

einen Standard-Setup mit dem Layout von dem Router, über die Website mit einem festen Menü gesteuert werden, Betrachten, sondern eine dynamischen Symbolleiste, die gezeigt mit der Seite ändert. Was ist die beste Vorgehensweise zum Ändern des Inhalts der Symbolleiste, abhängig davon, welche Seite angezeigt wird? Im Google Kontakte-Beispiel möchten wir nur, dass die Suchleiste auf der Seite Contacts angezeigt wird.

Basierend auf meiner rudimentären Kenntnis von Vue, scheint es, als ob ich ein Router-Layout mit einem scoped slot definieren würde. Es gibt wahrscheinlich eine Menge anderer Hacky-Wege, um dies zu erreichen. Aber ich suche nach einem sauberen, modularen Weg, um Symbolleisteninhalte auf Seiten zu definieren.

Ideen:

• Ab vor einer Weile vue-Router didn't support named slots. Aber das scheint changed recently zu haben, obwohl es keine Dokumentation gibt.

• Named views scheinen eine nette Möglichkeit zu sein, den Symbolleisteninhalt mit vue-router auf die Hauptseite zu binden. Es scheint jedoch keinen guten Weg zu geben, die Symbolleiste mit der Hauptseite zu "sprechen", wie es bei einem Slot der Fall wäre.

Answer 1

Sie können in Ihrer Anwendung mehrere Routeransichten definieren. Stellen Sie sich vor, Ihr Layout sieht sehr wie folgt vereinfacht:

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

Dann Sie eine Route mit Komponenten für beide Router Ansichten definieren:

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