Vuetify有一个非常灵活的布局方案,包括菜单,工具栏,内容和页脚,允许一些漂亮的material design schemes,例如, Google Contacts:
考虑一个标准设置,布局由路由器控制,整个站点有一个固定菜单,但动态工具栏随显示的页面而变化。根据显示的页面,更改工具栏内容的最佳做法是什么?在Google通讯录示例中,我们只希望搜索栏显示在Contacts
页面上。
根据我对Vue的基本知识,似乎用scoped slot定义路由器布局。可能有很多其他hacky方法来实现这一目标。但我正在寻找一种干净,模块化的方式来跨页面定义工具栏内容。
思路:
您可以在应用程序中定义多个路由器视图。想象一下,您的布局看起来非常简化,如下所示:
<v-app id="app">
<router-view name="navigation"></router-view>
<router-view></router-view>
</v-app>
然后,您可以为两个路由器视图定义包含组件的路由:
{
path: '/hello',
components: {
default: MyHelloComponent,
navigation: MyNavigationForHelloComponent
}
}