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

Question

Vuetify有一个非常灵活的布局方案,包括菜单,工具栏,内容和页脚,允许一些漂亮的材料设计方案,例如谷歌联系人:

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

基于我对Vue的基本知识,似乎定义了一个带有作用域槽的路由器布局.可能有很多其他hacky方法来实现这一目标.但我正在寻找一种干净,模块化的方式来跨页面定义工具栏内容.

思路:

• 很久以前,vue-router 不支持命名槽.但这似乎最近有所改变,尽管没有文件.

• 命名视图似乎是支持使用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
  }
}