Vuetify v-toolbar动态添加返回箭头后无法全屏的解决方法

我之前在Vuetify项目里也碰到过类似的情况，你现在的问题核心是单独引入的Toolbar被页面的根<div>限制了宽度，导致没法铺满屏幕。这里给你几个可行的解决思路，你可以根据项目情况选最合适的：

方案一：调整页面根容器的样式，让它全屏 #

既然Vue模板必须有唯一根元素，那我们可以给这个根元素设置全屏样式，让Toolbar能继承它的宽度：

<template>
  <!-- 给根div添加全屏样式，消除默认边距 -->
  <div style="width: 100%; min-height: 100vh; margin: 0; padding: 0;">
    <page-header backArrow="true"></page-header>
    <!-- 页面其他内容 -->
  </div>
</template>

或者更贴合Vuetify的用法，用v-container的fluid属性作为根容器：

<template>
  <v-container fluid class="pa-0 ma-0">
    <page-header backArrow="true"></page-header>
    <!-- 页面其他内容 -->
  </v-container>
</template>

fluid会让容器占满整个视口宽度，pa-0 ma-0去掉默认的内边距和外边距，这样Toolbar就能正常铺满屏幕了。

方案二：回到全局Toolbar，用路由元信息控制返回箭头显示 #

其实不用每个页面单独引入Toolbar，你可以回到原来的全局布局方案，通过路由元信息来控制返回箭头的显示，这样既保持了布局统一，又彻底解决了宽度问题：

1. 首先在路由配置里给需要显示返回箭头的页面添加元信息：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: { showBackArrow: false } // 首页不需要返回箭头
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    meta: { showBackArrow: true } // 详情页需要返回箭头
  }
]

2. 然后在App组件的Toolbar里，通过$route.meta判断显示状态，同时统一处理返回逻辑：

<template>
  <v-toolbar color="amber" app>
    <v-btn v-if="$route.meta.showBackArrow" icon class="hidden-xs-only" @click="$router.back()">
      <v-icon>arrow_back</v-icon>
    </v-btn>
    <v-toolbar-title>Babbelbord</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon to="/">
      <v-icon>home</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>settings</v-icon>
    </v-btn>
  </v-toolbar>
</template>

这样Toolbar还是全局的，不会被页面的根容器限制，而且能灵活控制不同页面的箭头显示，还省去了每个页面单独写返回逻辑的麻烦。

方案三：给Toolbar组件设置固定定位（适合特殊场景） #

如果必须单独引入Toolbar，也可以给Toolbar本身设置固定定位，让它脱离父容器的限制：

<!-- Toolbar组件模板 -->
<template>
  <v-toolbar color="amber" app style="position: fixed; top: 0; left: 0; right: 0; z-index: 1000;">
    <v-btn v-if="backArrow" icon class="hidden-xs-only" @click="$router.back()">
      <v-icon>arrow_back</v-icon>
    </v-btn>
    <v-toolbar-title>Babbelbord</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon to="/">
      <v-icon>home</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>settings</v-icon>
    </v-btn>
  </v-toolbar>
</template>

不过这个方案需要注意：页面的内容要设置margin-top，避免被Toolbar挡住，比如给页面根容器加style="margin-top: 64px;"（Vuetify的v-toolbar默认高度是64px）。

个人更推荐方案二，既保留了全局布局的统一性，又能灵活控制返回箭头，代码维护起来也更方便。

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