Vue + Vuetify + vue-router: changer le contenu de la barre d'outils en fonction de la page
Vuetify a un schéma de mise en page assez flexible englobant un menu, une barre d'outils, un contenu et un pied de page, qui permet une apparence agréable schémas de conception de matériaux , par exemple Google Contacts :
Considérez une configuration standard avec la mise en page contrôlée par le routeur, avec un menu fixe sur le site, mais une barre d'outils dynamique qui change avec la page affichée. Quelle est la meilleure pratique pour modifier le contenu de la barre d'outils en fonction de la page affichée? Dans l'exemple Google Contacts, nous voulons uniquement que la barre de recherche apparaisse sur la page Contacts.
Sur la base de ma connaissance rudimentaire de Vue, il semble que définir une configuration de routeur avec un emplacement de portée . Il y a probablement beaucoup d'autres moyens hacky pour y parvenir. Mais je recherche un moyen propre et modulaire de définir le contenu de la barre d'outils sur plusieurs pages.
Idées:
Il y a quelque temps vue-router ne supportait pas les slots nommés . Mais cela semble avoir changé récemment , bien qu'il n'y ait pas de documentation.
Vues nommées semble être une bonne façon de prendre en charge de lier le contenu de la barre d'outils à la page principale avec vue-router. Mais il ne semble pas y avoir un bon moyen pour la barre d'outils de "parler" à la page principale comme il le serait avec un slot.
Vous pouvez définir plusieurs vues de routeur dans votre application. Imaginez que votre mise en page soit extrêmement simplifiée comme ceci:
<v-app id="app">
<router-view name="navigation"></router-view>
<router-view></router-view>
</v-app>
Ensuite, vous pouvez définir un itinéraire avec des composants pour les deux vues de routeur:
{
path: '/hello',
components: {
default: MyHelloComponent,
navigation: MyNavigationForHelloComponent
}
}