Quasar V2配置求助：设置左侧抽屉默认关闭，点击汉堡按钮打开

要让左侧抽屉默认关闭、点击汉堡按钮切换状态，核心是正确设置v-model绑定变量的初始值，并确保汉堡按钮的点击逻辑能切换该变量。按以下步骤调整：

1. 初始化响应式变量为false #

在你的MainLayout.vue的script部分，定义绑定的变量并设置初始值为false（代表默认关闭）：

如果你用Composition API（Quasar默认推荐）： #

import { ref } from 'vue'

// 初始设为false，抽屉默认关闭
const leftDrawerOpen = ref(false)

如果你用Options API： #

export default {
  data() {
    return {
      leftDrawerOpen: false
    }
  }
}

2. 确保汉堡按钮的点击逻辑正确 #

模板里需要有触发抽屉的汉堡按钮，点击时切换leftDrawerOpen的值：

<q-btn
  icon="menu"
  @click="leftDrawerOpen = !leftDrawerOpen"
  class="q-mr-md"
/>

3. 保持q-drawer的v-model绑定不变 #

原代码里的q-drawer绑定无需改变量名，只要变量初始值是false就会默认关闭：

<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
  <q-list>
    <q-item-label header> Essential List </q-item-label>
    <EssentialLink
      v-for="link in essentialLinks"
      :key="link.title"
      v-bind="link"
    />
  </q-list>
</q-drawer>

<q-page-container>
  <router-view />
</q-page-container>

补充说明： #

show-if-above属性的作用是当屏幕宽度大于断点（默认sm，600px）时允许抽屉显示，但不会强制抽屉默认打开——v-model的状态优先级更高，只要初始值为false，不管屏幕大小，抽屉都会默认关闭。

你之前改变量名leftDrawerClosed没用，是因为没有同步修改按钮的点击逻辑，且变量的初始值才是控制默认状态的关键，不是变量名称。

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