nuxt.js - 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 的 Prop 成分。一种将按钮转换为 link我猜。
然后，将应用 Nuxt 的默认行为:

添加 nuxt-link-active如果匹配路径

添加 nuxt-link-exact-active如果它匹配路径 正好

更多信息可以在这里找到:

https://router.vuejs.org/api/#exact

https://debbie.codes/blog/nuxt-active-styles/

https://nuxtjs.org/examples/routing-active-links-classes/

至于答案，您应该删除 nuxt从你的按钮 Prop 并添加一个 @click这将完成与链接相同的工作，或者更好:编写一个链接并根据您的喜好对其进行样式设置。因为截至目前，我猜这个类正在创建 hover状态。