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

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

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

Andrew Mao · 技术社区 · 7 年前

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

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

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

思想:

1 回复 | 直到 7 年前

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

推荐文章

Jimmy Kiarie · 路由之前的Vue js

7 年前

angelique000 · 对于非常大的Web应用程序,Vue路由器的最佳实践是什么?

7 年前

Felipe Paulo · Vuejs未渲染子路由

7 年前

angelique000 · 如何在Vue组件中加载OpenSeadragon组件

7 年前

dsky · 保持Vue状态

7 年前

Paul Renshaw · Vue。Firebase托管上的js SPA,使用通配符重写Firebase云函数

7 年前

josefdev · 如何在Vue中声明被动属性。js公司

7 年前

ChadQi · 刷新浏览器导致文件路径更改

7 年前

DarkFenix · 访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能

7 年前

Chad Carter · Vue测试UTIL未知自定义元素:<路由器链接>

7 年前