Nuxt搭配Vuetify时 对应路由的导航按钮为何始终保持悬停状态

你碰到的这个"固定悬停高亮"根本不是样式缓存或交互逻辑卡死的bug，是Nuxt和Vuetify组件联动的默认设计，只是因为视觉效果和悬停态完全一致，才造成了误解。
核心逻辑链条：

• 你给v-btn加的nuxt属性，本质是把NuxtLink的全部路由能力透传给按钮组件
• NuxtLink默认自带路由匹配规则：只要当前页面路径和to指向的路径完全匹配，就会自动给对应元素绑定router-link-active、router-link-exact-active两个激活态类名
• Vuetify的v-btn内置了对上述两个类名的样式适配：只要检测到自身携带这两个类名，就会自动套用和鼠标悬停完全一致的高亮背景、字体高亮样式。因为Vuetify没有专门给激活态做差异化视觉设计，才会让你把路由激活态错认成卡死的悬停状态。

之所以会觉得突兀，是因为这两个按钮在你的设计里只是功能型跳转图标，本来没计划要做"当前路由导航选中态"的交互，才会对默认出现的高亮状态感觉反常。

根据你实际的交互需求选对应的改法就行，不用改Vuetify底层源码：

方案1：直接关闭当前按钮的路由激活匹配 #

如果这个跳转按钮根本不需要路由选中高亮的效果，只要给按钮补上两个空的类名绑定，就能关掉NuxtLink的自动激活绑定逻辑。改后的示例代码：

<!-- Home 按钮修改后 -->
<v-btn nuxt icon to="/" :exact-active-class="''" :active-class="''">
  <v-icon :dark="isDarkTheme"> mdi-home </v-icon>
</v-btn>

<!-- 登录按钮修改后 -->
<v-btn v-if="!$auth.loggedIn" icon nuxt to="/login" :exact-active-class="''" :active-class="''">
  <v-icon>mdi-login</v-icon>
</v-btn>

改完之后，哪怕你停在按钮指向的路由页面，Nuxt也不会给按钮自动加激活类，样式会完全回到普通无状态按钮的表现。

方案2：自定义激活态视觉，区分选中态和悬停态 #

如果你本来就需要保留"当前路由对应按钮高亮"的导航逻辑，只是不想让它和鼠标悬停的临时态搞混，可以给激活态指定专属类名，自己写样式做差异化：

<v-btn 
  nuxt 
  icon 
  to="/" 
  active-class="custom-nav-active"
>
  <v-icon :dark="isDarkTheme"> mdi-home </v-icon>
</v-btn>

然后全局自定义.custom-nav-active的样式，比如给选中态加固定的半透背景、底部标识线，和鼠标临时悬停的浅高亮做视觉区分，用户能一眼分清哪个是当前页面的选中态、哪个是鼠标临时悬停的效果。

方案3：移除nuxt属性，改用路由事件跳转 #

如果按钮的跳转逻辑非常简单，不需要NuxtLink的预加载、路由缓存优化能力，直接去掉nuxt属性，用点击事件触发路由跳转就行，从根源上切断路由匹配和按钮的关联：

<v-btn icon @click="$router.push('/')">
  <v-icon :dark="isDarkTheme"> mdi-home </v-icon>
</v-btn>

这种写法下Nuxt根本不会给按钮绑定任何路由相关的类名，自然不会出现进了对应路由就自动高亮的问题。

很多开发者碰到这个问题的时候，会第一时间去排查悬停态CSS有没有被锁死、Vuetify主题配置有没有错误，往往绕了一大圈才发现是NuxtLink的默认激活类导致的——只要是加了nuxt属性的Vuetify组件，碰到和自身to值匹配的路由，默认就会触发激活态高亮，这是组件的默认行为，不是异常bug，按照自己的交互需求调整激活类的绑定逻辑就行。

内容的提问来源于stack exchange，提问作者Linsane