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

问题描述 投票:9回答:1

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

enter image description here

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

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

思路:

  • 不久之前vue-router didn't support named slots。但这似乎有changed recently,虽然没有文件。
  • Named views似乎是一种很好的方式来支持使用vue-router将工具栏内容绑定到主页面。但是,工具栏似乎没有一种好方法可以与主页“对话”,就像有一个插槽一样。
vue.js vuejs2 vue-component vue-router vuetify.js
1个回答
8
投票

您可以在应用程序中定义多个路由器视图。想象一下,您的布局看起来非常简化,如下所示:

<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

© www.soinside.com 2019 - 2024. All rights reserved.