如何防止使用 Vue 路由器 link 的 Vuetify 按钮出现灰色背景？

Question

当添加 Vue-Router link 比如 to="/" 到我的 v-app-bar-nav-icon:

<v-app-bar fixed app>
  <v-app-bar-nav-icon v-else to="/">
    <v-icon>mdi-home-city</v-icon>
  </v-app-bar-nav-icon>
</v-app-bar>

当我在主页 (/) 时，该按钮（仅）获得灰色背景。

这是一个错误吗？如何防止这种行为？

Answer 1

重新调整此元素的用途很不寻常。通常 v-app-bar-nav-icon 用于切换导航抽屉的可见性 - 最好使用其他元素。

您的代码，尤其是 v-else 让图标消失。 to="/" 部分在我的测试中没有改变图标颜色。

Answer 2

我使用了 Chrome 的 Inspect Element 功能，在 Styles 选项卡下我找到了这个：

.theme--light.v-btn--active::before {
  opacity: 0.18;
}

因此只需重写此 class 并将其不透明度更改为 0 即可。

我认为这是有意为之的，但不是我最喜欢的...:/

How to prevent grey background with Vuetify button that is using Vue router link?