Vue 3 + Inertia JS中如何从深度嵌套数组对象查找元素显示页面标题

你的代码有两个核心问题导致查找失败：

1. internalRoutes是包含多个菜单数组的对象，不是数组，直接调用find()方法无效。
2. 菜单结构是深度嵌套的（存在children子菜单），普通单层遍历无法覆盖子菜单中的项。

编写递归函数遍历所有菜单（包括子菜单），找到与当前页面组件匹配的项，提取其名称作为页面标题。修改后的完整代码如下：

import { reactive, computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

const internalRoutes = reactive({
    mainMenu: [
        {
            name: 'Dashboard',
            href: route('dashboard'),
            icon: 'Squares2X2Icon',
            current: 'Dashboard',
        },
        {
            name: 'Users',
            icon: 'UsersIcon',
            current: false,
            children: [
                { name: 'Engineering', href: '#', current: false },
                { name: 'Human Resources', href: '#', current: false },
                {
                    name: 'Customer Success',
                    href: '#',
                    current: false,
                },
            ],
        },
        {
            name: 'Reports',
            href: '#',
            icon: 'ChartPieIcon',
            current: false,
        },
        {
            name: 'Projects',
            icon: 'FolderIcon',
            current: false,
            children: [
                { name: 'GraphQL API', href: '#' },
                { name: 'iOS App', href: '#' },
                { name: 'Android App', href: '#' },
                { name: 'Customer Portal', href: '#' },
            ],
        },
        {
            name: 'Calendar',
            href: '#',
            icon: 'CalendarIcon',
            current: false,
        },
        {
            name: 'Documents',
            href: '#',
            icon: 'DocumentDuplicateIcon',
            current: false,
        },
    ],
    userMenu: [
        {
            name: 'Profile',
            href: route('profile.edit'),
            current: 'Profile/Edit',
        },
        {
            name: 'Sign Out',
            href: route('logout'),
            method: 'post',
            as: 'button',
        },
    ],
    settingsMenu: [
        {
            name: 'Organization',
            current: true,
            href: '#',
        },
        {
            name: 'Access Control',
            href: route('access_control'),
            current: 'Settings/AccessControl/Index',
            children: [
                {
                    name: 'Users',
                    href: route('users.index'),
                    current: false,
                },
                {
                    name: 'Roles',
                    href: route('roles.index'),
                    current: false,
                },
                {
                    name: 'Permissions',
                    href: route('permissions.index'),
                    current: false,
                },
            ],
        },
    ],
})

// 递归查找匹配的菜单项
const findMatchingRoute = (menuItems, targetComponent) => {
    for (const item of menuItems) {
        // 检查当前项是否匹配
        if (item.current === targetComponent) {
            return item
        }
        // 递归检查子菜单
        if (item.children && item.children.length > 0) {
            const childMatch = findMatchingRoute(item.children, targetComponent)
            if (childMatch) return childMatch
        }
    }
    return null
}

const pageHeader = computed(() => {
    const currentComponent = usePage().component
    // 合并所有菜单组为一个数组
    const allMenus = [
        ...internalRoutes.mainMenu,
        ...internalRoutes.userMenu,
        ...internalRoutes.settingsMenu
    ]
    const matchedItem = findMatchingRoute(allMenus, currentComponent)
    // 找不到匹配项时返回默认标题
    return matchedItem?.name || 'Dashboard'
})

• 新增findMatchingRoute递归函数：遍历菜单项，匹配成功则返回当前项，否则递归检查子菜单。
• 重构pageHeader计算属性：合并所有菜单数组，调用递归函数查找匹配项，同时添加默认值处理边界情况。
• 修复原代码中直接在对象上调用find()的错误，因为internalRoutes不是数组。

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