Vuejs条件AppBar

Question

在Vuetify中，管理不同页面的不同样式的标题栏的最佳方法是什么？如何通过编程实现back按钮而不是汉堡包图标？例子:有5个屏幕，其中2个在应用程序栏中有独立的控件。

Answer 1

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

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

对于启用Back的问题，只需将app-bar-nav-图标替换为适当的图标名 (mdi-arrow-left，可能)，并将其改为@click to $router.go(-1) (有关路线的进一步阅读)