全站面包屑与左侧菜单自动同步需统一路由元信息、解耦生成逻辑、导航守卫驱动更新：一、路由配置用meta定义title/icon/rank/hidden；二、usebreadcrumb()基于matched过滤rank有效项；三、菜单通过route.matched匹配激活态并推导展开keys；四、全局beforeeach缓存matched至store，组件watch响应式更新。
在 Vue 项目中实现“全站面包屑”与左侧菜单自动同步，核心在于**统一路由元信息、解耦面包屑生成逻辑、利用导航守卫驱动状态更新**。不依赖第三方插件，纯 Vue Router + 组合式 API 即可稳定支撑中大型后台系统。
一、路由配置：用 meta 定义层级与显示逻辑
所有路由必须声明 meta: { title, icon, rank, hidden } 等字段，其中 rank（数字）用于控制是否参与面包屑（如登录页 rank=0 不显示），hidden 控制是否出现在菜单中。
示例：
{
path: '/system',
name: 'System',
component: () => import('@/views/system/index.vue'),
meta: { title: '系统管理', icon: 'Setting', rank: 2 },
children: [
{
path: 'user',
name: 'User',
component: () => import('@/views/system/user.vue'),
meta: { title: '用户管理', rank: 3 }
}
]
}
关键点：
-
每个路由必须有唯一
name，作为面包屑路径识别依据 -
rank值越小，层级越高；为 0 或 undefined 的路由默认不进入面包屑链 - 支持嵌套无限层，但建议限制在 4 层内以保障体验
二、面包屑数据生成：从 matched 提取并过滤
利用 router.currentRoute.value.matched 获取当前匹配的完整路由记录数组，再按 rank 过滤、去重、截取有效项。
推荐封装为一个组合函数 useBreadcrumb()：
export function useBreadcrumb() {
const route = useRoute()
const breadcrumb = computed(() => {
return route.matched.filter(item => item.meta.rank && !item.meta.hidden)
})
return { breadcrumb }
}
说明：
