Vuetify侧边栏(drawer)展开时如何推动内容避免重叠？

要让导航抽屉展开时推动页面内容而非覆盖，核心是调整v-navigation-drawer的类型属性，具体修改如下：

关键调整 #

• 移除temporary和hide-overlay属性：这两个属性会让抽屉以悬浮覆盖的形式显示
• 添加persistent属性：该类型的抽屉会纳入页面布局流，展开时自动推动右侧内容区域

修改后的NavBar.vue代码 #

<template>
  <nav>
    <v-app-bar flat app>
      <v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer" />
      <v-app-bar-title class="text-uppercase grey--text">
        <span class="font-weight-light">Todo</span>
        <span>Ninja</span>
      </v-app-bar-title>
      <v-spacer />
      <v-btn text color="grey">
        <span>Sign Out</span>
        <v-icon>mdi-exit-to-app</v-icon>
      </v-btn>
    </v-app-bar>

    <v-navigation-drawer
      app
      persistent
      v-model="drawer"
      class="primary"
    >
      <v-list color="primary">
        <v-list-item
          v-for="(menu, i) in menus"
          :key="i"
          router
          :to="menu.route"
        >
          <v-list-item-icon>
            <v-icon v-text="menu.icon" class="white--text" />
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="menu.text" class="white--text" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </nav>
</template>

原理说明 #

persistent类型的导航抽屉会被Vuetify的布局系统识别，展开时会自动挤压v-content区域的宽度，实现内容被推动的效果；而原代码中的temporary抽屉属于脱离布局流的悬浮层，只会覆盖内容不会改变布局结构。

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