Vuejs条件AppBar

Question

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

Answer 1

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

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

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