代码之家 › 专栏 › 技术社区 › Andrew Mao

Vue+Vuetify+Vue路由器:根据页面更改工具栏内容

vuetify.js vue-router vue-component vuejs2 vue.js

18

Andrew Mao · 技术社区 · 7 年前

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

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

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

思想:

1 回复 | 直到 7 年前

1

20

RobDil 6 年前

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

<v-app id="app">
  <router-view name="navigation"></router-view>
  <router-view></router-view>
</v-app>

然后,可以使用两个路由器视图的组件定义路由:

{
  path: '/hello',
  components: {
    default: MyHelloComponent,
    navigation: MyNavigationForHelloComponent
  }
}