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

Question

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

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

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

想法：

• 不久前 vue-router didn't support named slots。不过这个好像有changed recently，虽然没有文档。

• Named views 似乎是支持使用 vue-router 将工具栏内容绑定到主页的好方法。但是，工具栏似乎没有像插槽那样与主页“对话”的好方法。

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

Documentation

Working Example from Documentation