如何使用Vuetify的Navigation Drawer组件实现固定响应式侧边导航？

仅使用Vuetify完全可以实现你需要的导航效果，无需引入额外依赖，核心利用v-navigation-drawer内置的响应式断点、模式切换能力即可完成。

核心实现逻辑 #

• 大屏状态下抽屉固定显示，宽度锁定不随窗口缩放变化
• 视口宽度小于设定断点阈值时自动隐藏抽屉，仅展示唤出按钮
• 小屏唤出的抽屉为悬浮临时模式，覆盖在内容上层，点击蒙层可自动关闭

具体修改点 #

1. 给v-navigation-drawer新增核心属性：

• width：指定固定抽屉宽度，比如设为250，大屏下不会自适应变化
• permanent：大屏下永久固定显示，不会被隐藏
• mobile-breakpoint：设置响应式断点阈值，单位为px，视口宽度小于该值时自动退出永久模式
• overlay：小屏打开抽屉时显示蒙层，实现悬浮效果

2. 新增小屏唤出按钮，仅在小于断点阈值时显示，点击切换抽屉显隐状态

完整可运行代码示例 #

<template>
  <v-app>
    <!-- 顶部导航栏 -->
    <v-app-bar app>
      <!-- 仅小屏显示的菜单唤出按钮 -->
      <v-app-bar-nav-icon 
        @click="drawer = !drawer"
        v-show="$vuetify.breakpoint.width < 1200"
      ></v-app-bar-nav-icon>
      <v-toolbar-title>页面标题</v-toolbar-title>
    </v-app-bar>

    <!-- 导航抽屉 -->
    <v-navigation-drawer 
      v-model="drawer" 
      class="nav-container d-flex"
      width="250"
      permanent
      mobile-breakpoint="1200"
      overlay
      app
    >
      <div class="options">
        <li>菜单项1</li>
        <li>菜单项2</li>
        <!-- 其他菜单项 -->
      </div>
    </v-navigation-drawer>

    <!-- 主内容区域 -->
    <v-main>
      <div style="min-width: 100px; max-width: 100%;" class="d-flex flex-column flex-grow-1 flex-shrink-0 pa-4">
        页面内容区域
      </div>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false
    }
  }
}
</script>

适配说明 #

如果你的项目使用的是Vuetify 3，仅需要将断点判断的写法调整为useDisplay()组合式API调用即可，抽屉相关属性的用法完全一致；mobile-breakpoint也可以直接替换为Vuetify内置的断点字符串，比如md、lg，对应框架默认的断点尺寸。

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