Nuxt Vuetify 按钮总是悬停

Question

我在最新版本的 Vuetify 中使用 NuxtJs。

在我的导航栏中有一个指向主页的主页按钮，这是它的代码：

<v-app-bar fixed app>
  <v-toolbar-title v-text="title" />
  <v-btn nuxt icon to="/">
    <v-icon :dark="isDarkTheme"> mdi-home </v-icon>
  </v-btn>
</v-app-bar>

只要我在主页上，图标就会悬停：

当我离开这个页面去任何其他页面时，它看起来像这样：

一旦您注销，最右边的注销按钮就会换成登录按钮。当我在登录页面上时，登录按钮也出现悬停状态，因为它导致 /login..

<!-- Login -->
<v-btn v-if="!$auth.loggedIn" icon nuxt to="/login">
  <v-icon>mdi-login</v-icon>
</v-btn>

有没有人遇到过这样的问题？

编辑：更清楚地说明我的问题。这些按钮始终悬停，不受我在页面上所做操作的影响，只要我在单击它们时指向的页面上。

Answer 1

通过阅读官方文档，似乎有一个 nuxt 道具可以传递给 v-btn 组件。我猜是将按钮转换为 link。

然后，将应用 Nuxt 的默认行为：

添加一个 nuxt-link-active class 如果它匹配路径
添加 nuxt-link-exact-active 如果它匹配路径完全

可在此处找到更多信息：

至于答案，您应该从按钮中删除 nuxt 属性并添加一个 @click 来完成与 link 相同的工作，或者更好：写a link 并根据自己的喜好设置样式。因为截至目前，我猜这个 class 正在创建 hover 状态。

Nuxt Vuetify 按钮总是悬停

Nuxt Vuetify Button always hovered

vue.js

vuejs2

nuxt.js

vuetify.js