Vue3中v-app-bar小屏幕消失？导航组件路由链接隐藏问题求助

问题分析 #

• 小屏幕下v-app-bar消失：使用v-row+v-col的三列布局在窄屏时过度挤压，导致AppBar高度异常或内容溢出，最终被隐藏。
• 路由链接无法按需隐藏：缺少响应式显示控制逻辑，小屏幕下路由链接仍强制显示，进一步加剧布局挤压问题。

解决方案 #

1. 修复AppBar布局结构 #

替换原有的v-row+v-col布局为Vuetify AppBar原生的布局组件，避免窄屏挤压；同时确保AppBar正确融入应用布局体系。

2. 添加响应式隐藏逻辑 #

通过Vuetify内置的响应式类，控制路由链接仅在中等及以上屏幕显示，小屏幕下隐藏，仅保留菜单按钮；菜单按钮则仅在小屏幕显示。

修改后的完整代码 #

<template>
  <div>
    <v-app-bar color="primary" app>
      <!-- 左侧标题 -->
      <v-toolbar-title>Verus Currency Explorer</v-toolbar-title>
      
      <!-- 中间RPC信息，用v-spacer实现居中 -->
      <v-spacer></v-spacer>
      <v-toolbar-title class="text-center">RPC: 192.168.1.1</v-toolbar-title>
      <v-spacer></v-spacer>

      <!-- 路由链接：仅中等及以上屏幕显示 -->
      <v-toolbar-items class="d-none d-md-flex">
        <router-link to="/" class="nav-link" :class="{ 'active-menu': $route.path === '/' }">Dashboard</router-link>
        <router-link to="/currencies" class="nav-link" :class="{ 'active-menu': $route.path === '/currencies' }">Currencies</router-link>
        <router-link to="/settings" class="nav-link" :class="{ 'active-menu': $route.path === '/settings' }">Settings</router-link>
      </v-toolbar-items>
      
      <!-- 菜单按钮：仅小屏幕显示 -->
      <v-btn icon @click="drawer = !drawer" class="d-md-none">
        <v-icon>mdi-menu</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 导航抽屉 -->
    <v-navigation-drawer :model-value="drawer" temporary class="navdrawer">
      <v-list>
        <router-link to="/" class="nav-link" :class="{ 'active-menu': $route.path === '/' }">
          <v-list-item>
            <v-icon>mdi-view-dashboard</v-icon>
            Dashboard
          </v-list-item>
        </router-link>
        <router-link to="/currencies" class="nav-link" :class="{ 'active-menu': $route.path === '/currencies' }">
          <v-list-item>
            <v-icon>mdi-currency-usd</v-icon>
            Currencies
          </v-list-item>
        </router-link>
        <router-link to="/settings" class="nav-link" :class="{ 'active-menu': $route.path === '/settings' }">
          <v-list-item>
            <v-icon>mdi-settings</v-icon>
            Settings
          </v-list-item>
        </router-link>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const drawer = ref(false);
</script>

<style scoped>
.nav-link {
  color: white;
  text-decoration: none;
  padding: 10px;
}

.active-menu {
  color: grey;
}

.navdrawer {
  background-color: blue;
  color: white;
}
</style>

修改点说明 #

1. 布局重构：

   • 移除v-row和v-col，改用v-spacer实现左、中、右三部分的自适应布局，彻底解决窄屏挤压问题。
   • 给v-app-bar添加app属性，确保它能正确嵌入Vuetify应用布局，避免被其他元素遮挡。

2. 响应式控制：

   • 路由链接的容器添加d-none d-md-flex类：默认隐藏，在中等屏幕（≥960px）及以上显示。
   • 菜单按钮添加d-md-none类：仅在小屏幕显示，中等及以上屏幕自动隐藏。

3. 清理无效代码：删除v-navigation-drawer上无效的:icon="menubar"属性，避免控制台报错。

修改后效果：小屏幕下AppBar正常显示标题、RPC信息和菜单按钮，路由链接隐藏；点击菜单按钮可打开导航抽屉；中等及以上屏幕显示完整的AppBar路由链接，菜单按钮自动隐藏，完全匹配需求。

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