Vuetify抽屉打开时背景透明度未变化问题排查

核心原因 #

你的AppHeader.vue组件中嵌套了<v-app>标签，而Vuetify要求整个应用只能存在一个根<v-app>实例。这种嵌套结构会导致临时抽屉（temporary模式）的背景遮罩逻辑失效，无法正确渲染。

修复方案 #

1. 修改AppHeader.vue，移除内部的<v-app> #

将组件内的<v-app>标签删除，只保留导航栏和抽屉部分：

<template>
  <div>
    <v-app-bar app color="white-lighten-1" dark clipped-left>
      <v-toolbar-title>Text</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn outlined v-if="showButtons">I'm Worker</v-btn>
      <v-btn outlined v-if="showButtons">I'm Requester</v-btn>
      <v-app-bar-nav-icon v-if="showIcon" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" location="right" app temporary>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" :value="item" link>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showButtons: true, // Initially, show the buttons
      showIcon: false,   // Initially, hide the icon button
      drawer: false,
      items: [
        { title: "I'M WORKER", icon: 'mdi-view-dashboard' },
        { title: "I'M REQUESTER", icon: 'mdi-account-box' },
      ],
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      const screenWidth = window.innerWidth;
      this.showButtons = screenWidth > 540;
      this.showIcon = screenWidth <= 540;
    },
  },
};
</script>

2. 在根组件（如App.vue）中保留唯一的<v-app> #

将AppHeader作为子组件嵌入根<v-app>内，确保整个应用只有一个v-app实例：

<template>
  <v-app>
    <AppHeader />
    <!-- 你的其他页面内容 -->
  </v-app>
</template>

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  components: {
    AppHeader
  }
}
</script>

原理说明 #

Vuetify的v-navigation-drawer在temporary模式下，背景遮罩是由根v-app组件统一管理和渲染的。如果在子组件中嵌套v-app，遮罩会被限制在子组件的v-app范围内，无法覆盖整个页面，最终表现为背景不变暗。

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