Vuetify导航栏v-btn路由激活样式问题：背景未正确修改

你的问题出在DOM结构嵌套错误和CSS选择器层级不对这两个点上。

问题分析 #

• 你在v-btn内部嵌套了router-link，但Vuetify的v-btn本身支持直接绑定router-link的属性（比如to），嵌套会导致激活类被加到内部的router-link标签上，而不是v-btn，所以样式只能影响文本，无法作用到按钮背景。
• 你的CSS选择器.v-btn .router-link-exact-active是选中v-btn内部的router-link-exact-active元素，而非激活状态的v-btn本身。

修复方案 #

1. 简化DOM结构，直接给v-btn添加router-link相关属性，无需内部嵌套router-link：

<v-btn 
  router-link 
  to="/" 
  active-class="active"
>
  <v-card></v-card>
  Home
</v-btn>

2. 调整CSS选择器，直接选中激活状态的v-btn：

.v-btn.active {
  color: #333333;
  background-color: #888888;
  font-size: xx-large;
}

如果你想用默认的router-link-exact-active类（不需要设置active-class），可以这样写：

.v-btn.router-link-exact-active {
  color: #333333;
  background-color: #888888;
  font-size: xx-large;
}

对应的HTML去掉active-class：

<v-btn 
  router-link 
  to="/"
>
  <v-card></v-card>
  Home
</v-btn>

修改后，激活状态的样式会直接作用在v-btn上，背景色和文本样式都能正常生效。

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