如何在 Vuetify 中覆盖 v-btn 活动类？

Question

我正在使用 Vue.js 2.6.10n 以及 Vuetify 2.1.0 和 vue-router 3.1.3 开发一个网站。

我有一个带有 v-btns 的 v-app-bar 来链接到不同的伪页面，并希望在按钮处于活动状态时有一个自定义类，即它链接到当前显示的页面。使用active-classv-btn 的 ，我可以在 Vuetify 默认值的“顶部”添加样式，但不能完全覆盖它。

我怎样才能完全摆脱默认的活动类？

我的目标只是在 btn 文本处于活动状态时为其添加下划线，并摆脱默认的“按下按钮”样式。

这是我的代码示例：

<template>
<v-btn
        to="/"
        active-class="active"
        text
        class=" white--text display-1 logo"
        >HOME</v-btn>
.
.
.
</template>
<style lang="scss" scoped>
.active {
  border-bottom: solid;
  border-color: yellow;
}
</style>

Answer 1

to="/"我通过删除上的 propv-btn并更改按钮上的 @click 事件来调用函数并推送到路线来绕过与路线匹配的活动类。似乎路由器不再to与按钮上的道具匹配，因此它不知道应用活动类。

html:

    <v-btn
        text
        color="primary"
        @click.stop="router.push({ name: 'myRouteName' })"
      >
</v-btn>

js:

  routeTo(routeName: string) {
    if (this.$router.currentRoute.name != routeName) {
      this.$router.push({ name: routeName })
    }
  }

请注意，我检查新路线名称与当前路线名称不匹配，以避免重复导航错误。