Vue3导航栏动态菜单及子菜单不显示问题求助

1. 先验证共享变量是否正确传递 #

首先确认后端的menulist是否成功传递到前端组件。在Navigation.vue中添加调试代码，打印共享数据：

<script setup>
import { usePage } from '@inertiajs/vue3';
const page = usePage();

// 控制台打印菜单数据，检查是否存在
console.log('菜单数据:', page.props.menulist);
</script>

打开浏览器控制台，若没有输出或数据为空，说明后端共享逻辑有问题：

• 检查HandleInertiaRequests.php的share()方法，确保menulist被正确注入：

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'menulist' => function () use ($request) {
            // 这里替换为你的菜单数据获取逻辑，确保结构正确
            return [
                [
                    'name' => '仪表盘',
                    'route' => 'dashboard',
                    'submenu' => []
                ],
                [
                    'name' => '用户管理',
                    'route' => '',
                    'submenu' => [
                        ['name' => '用户列表', 'route' => 'users.index'],
                        ['name' => '新增用户', 'route' => 'users.create']
                    ]
                ]
            ];
        },
    ]);
}

注意：如果菜单从数据库获取，要确保当前用户有权限访问对应菜单，查询逻辑无错误。

2. 修正Navigation.vue的渲染逻辑 #

假设你的menulist数据结构如上，以下是可正常渲染的Tailwind风格导航组件示例：

<template>
  <nav class="bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-4">
              <!-- 遍历主菜单 -->
              <template v-for="menu in $page.props.menulist" :key="menu.name">
                <!-- 无下拉子菜单的主项 -->
                <a
                  v-if="!menu.submenu || menu.submenu.length === 0"
                  :href="route(menu.route)"
                  class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                >
                  {{ menu.name }}
                </a>

                <!-- 带下拉子菜单的主项 -->
                <div v-else class="relative group">
                  <button class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center">
                    {{ menu.name }}
                    <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                  </button>
                  <!-- 下拉子菜单容器 -->
                  <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block">
                    <a
                      v-for="submenu in menu.submenu"
                      :key="submenu.name"
                      :href="route(submenu.route)"
                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >
                      {{ submenu.name }}
                    </a>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { usePage } from '@inertiajs/vue3';
const page = usePage();
</script>

3. 检查路由与权限问题 #

• 确保菜单中的route名称与Laravel路由定义的name完全匹配，比如Route::get('/dashboard', ...)->name('dashboard');
• 若菜单有权限控制，确认menulist只返回当前用户有权限访问的项，避免因过滤逻辑导致菜单为空
• 检查页面组件是否意外覆盖了menulist共享变量

4. 清除缓存并重新编译资源 #

若以上步骤都正常，尝试清理缓存并重新编译前端资源：

# 清除Laravel缓存
php artisan cache:clear
php artisan config:clear

# 重新编译前端资源
npm run dev

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