Vue + Vuetify + vue-router：根据页面更改工具栏内容

Question

Vuetify 有一个非常灵活的布局方案，包括菜单、工具栏、内容和页脚，允许一些漂亮的 material design schemes, e.g. Google Contacts:

考虑一个标准设置，其布局由路由器控制，整个站点具有固定菜单，但动态工具栏会随着显示的页面而变化。根据显示的页面更改工具栏内容的最佳做法是什么？在 Google 联系人示例中，我们只希望搜索栏显示在 Contacts 页面上。

根据我对 Vue 的初步了解，似乎定义了一个 scoped slot 的路由器布局。可能有很多其他 hacky 方法可以实现这一点。但我正在寻找一种干净、模块化的方式来跨页面定义工具栏内容。

想法：

前段时间的vue-routerdidn't support named slots. But this seems to have changed recently，虽然没有文档
Named views 似乎是支持使用 vue-router 将工具栏内容绑定到主页的好方法。但是工具栏似乎没有一个很好的方法'talk'到主页，因为有一个插槽。

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
  }
}

Vue + Vuetify + vue-router: changing toolbar content based on page