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