Vue2+Vuetify2.6中v-spacer配合v-tabs无法实现右对齐如何解决

问题原因 #

Vuetify 2.x 中v-tabs组件默认自带flex-grow: 1的样式属性，会自动填充父容器v-app-bar的所有剩余可用宽度，因此v-spacer的填充空白作用被覆盖，无法实现左右分隔的效果。

解决方案 #

可以选择以下任意一种方式实现需求：

方案1：保留v-spacer写法，禁用v-tabs自动占宽特性 #

给v-tabs添加Vuetify内置的flex工具类flex-grow-0即可：

<!-- Navbar.vue 中修改v-tabs代码 -->
<v-tabs class="flex-grow-0">
  <v-tab>项目</v-tab>
  <v-tab>用户</v-tab>
  <v-tab>设置</v-tab>
</v-tabs>

方案2：直接使用v-tabs内置属性实现右对齐（不需要v-spacer） #

删掉原有的v-spacer标签，给v-tabs添加right属性：

<!-- 删掉<v-spacer></v-spacer>代码行 -->
<v-tabs right>
  <v-tab>项目</v-tab>
  <v-tab>用户</v-tab>
  <v-tab>设置</v-tab>
</v-tabs>

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