Vuetify底部导航显示异常问题求助

针对你遇到的底部导航按钮高度不满、背景色异常的问题，核心原因是错误地在v-bottom-navigation内部直接使用v-btn组件，正确的做法是使用Vuetify专为底部导航设计的v-bottom-navigation-item组件，具体修正如下：

修正后的代码 #

<template>
  <v-app>
    <v-app-bar app> </v-app-bar>
    <v-main>
      <router-view />
    </v-main>
    <v-bottom-navigation app v-model="value">
      <v-bottom-navigation-item 
        value="cards" 
        to="/cards"
        text="Cards"
        icon="mdi-cards"
      />
      <v-bottom-navigation-item 
        value="decks" 
        to="/decks"
        text="Decks"
        icon="mdi-mail"
      />
    </v-bottom-navigation>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    value: 'cards',
  }),
}
</script>

问题原因说明 #

• v-bottom-navigation组件有自己的内部样式规范，v-btn并没有适配它的布局逻辑，所以会出现按钮高度无法填满、背景色继承异常的问题。
• 你遇到的"偶尔删除代码后恢复正常"是热重载时的临时样式缓存问题，并非真正解决了问题，修改导航代码后缓存失效，问题会再次出现。

额外提示 #

如果需要自定义底部导航项的样式，不要直接修改v-btn的样式，而是通过v-bottom-navigation-item的color、active-class等属性，或者利用Vuetify的深度选择器来调整，避免破坏组件的原生布局逻辑。

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