Vuejs 条件 AppBar

Question

在 Vuetify 中，为各种页面管理不同样式的应用栏的最佳方法是什么？ 以及如何以编程方式启用 back 按钮而不是汉堡图标？ 示例：有 5 个屏幕，其中 2 个在应用栏中有单独的控件。

Answer 1

关于给应用栏着色的问题，如果你使用的是路由器，你可以添加一个元标记“颜色”，然后将v-app-bar的颜色属性设置为 :color="$route.meta && $route.meta.color || 'blue-grey'"，其中蓝灰色是后备颜色。你的路线看起来像：

{
  path: '/mycoolpath',
  component: MyCoolComponent,
  meta: {
     //other route meta...
     color: 'blue'
  }
}

对于启用返回的问题，只需将 app-bar-nav-icon 替换为适当的 icon name（mdi-arrow-left，可能）并将其 @click 更改为 $router.go(-1)（further reading on routes）