如何实现面包屑导航？利用嵌套路由 meta 元信息动态生成的实战方案-Vue.js-PHP中文网

面包屑导航通过路由meta信息动态生成，核心是逐级收集matched中title存在且hideInBreadcrumb为false的路由项，按顺序渲染并处理动态路径与国际化。

如何实现面包屑导航？利用嵌套路由 meta 元信息动态生成的实战方案

面包屑导航可以通过路由元信息（meta）配合嵌套路由结构动态生成，核心在于逐级收集父级和当前路由的 meta.title 或类似字段，并按层级顺序渲染。

一、定义路由时统一配置 meta 信息

在 Vue Router（v4/v5）或 React Router（v6+）中，为每个路由（尤其是嵌套路由）设置清晰、可继承的 meta 字段。推荐使用 title 表示显示文本，hideInBreadcrumb 控制是否参与面包屑（如登录页、404 页）。

Vue Router 示例（router/index.js）：

{
  path: '/user',
  name: 'UserLayout',
  component: () => import('@/layouts/UserLayout.vue'),
  meta: { title: '用户中心' },
  children: [
    {
      path: 'profile',
      name: 'UserProfile',
      component: () => import('@/views/user/Profile.vue'),
      meta: { title: '个人资料' }
    },
    {
      path: 'settings',
      name: 'UserSettings',
      component: () => import('@/views/user/Settings.vue'),
      meta: { title: '系统设置', hideInBreadcrumb: true }
    }
  ]
}

注意：UserLayout 路由本身不直接对应页面，但它的 meta.title 是面包屑首项；UserSettings 设置 hideInBreadcrumb: true 后将被跳过。

二、封装通用面包屑组件（以 Vue 3 + Composition API 为例）

组件通过 useRoute() 获取当前路由，再递归向上遍历 matched 数组，筛选出应展示的路由项。

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

只取 meta.title 存在且 hideInBreadcrumb !== true 的路由
确保顺序为从根到当前（route.matched 天然有序）
为每项生成可点击链接（），非最后一项加「/」分隔符

<template><div class="breadcrumb">
    <routerlink to="/" class="item">首页</routerlink><span v-for="(item, i) in breadcrumbItems" :key="item.path">
      <span class="separator">/</span>
      <routerlink v-if="i < breadcrumbItems.length - 1" :to="item.path" class="item">{{ item.meta.title }}</routerlink><span v-else class="item current">{{ item.meta.title }}</span>
    </span>
  </div>
</template><p><script setup>
import { useRoute } from 'vue-router'</script></p><p>const route = useRoute()
const breadcrumbItems = route.matched.filter(
r => r.meta.title && r.meta.hideInBreadcrumb !== true
)
</p>

三、处理动态路由与参数化路径（如 /post/:id）

当路由含动态段（:id）时，item.path 是原始带参数的路径（如 /post/:id），不能直接用作链接。需结合 route.params 动态拼接真实路径。

对每个匹配项，用 router.resolve({ name: item.name, params: route.params }).path 生成有效链接
若路由未命名（无 name），可用 item.path.replace(/:\w+/g, route.params[...]) 简单替换（仅限简单场景）
建议所有需要面包屑的路由都显式声明 name，便于精准解析