Blazor中动态生成面包屑导航栏需监听NavigationManager.LocationChanged事件，解析当前路由路径段并映射为显示名称与链接，前N−1项为NavLink，末项仅文字并标aria-current="page"，封装为可配置的BreadcrumbNav组件。
Blazor 中动态生成面包屑导航栏，核心是根据当前路由路径自动解析层级结构，并结合页面元数据（如页面标题、路由参数）实时渲染。不需要硬编码每条路径，关键是利用 NavigationManager 监听路由变化，并配合一个可配置的路由映射规则或页面元数据约定。
获取当前路由并拆解路径段
使用 NavigationManager 的 Uri 属性获取完整 URL，再通过 new Uri(...).AbsolutePath 提取路径部分，用 .Split('/', StringSplitOptions.RemoveEmptyEntries) 拆成路径段数组。注意过滤空段和特殊段（如 "api" 或带查询参数的部分）。
- 在组件中注入
@inject NavigationManager NavigationManager - 监听
NavigationManager.LocationChanged事件触发更新 - 对路径做标准化处理：统一小写、去除尾部斜杠、忽略查询参数
为每个路径段绑定显示名称和跳转链接
单纯拆路径不够，还需知道每级“该叫什么”以及“点它去哪”。推荐两种轻量方案：
-
基于约定的命名：如
/admin/users→ ["Admin", "Users"]，把 kebab-case 转 PascalCase 并替换关键词（users→Users） -
页面级元数据支持：在页面组件（
@page）顶部加[Breadcrumb("用户管理")]特性，或在@code块中定义BreadcrumbTitle属性，由面包屑组件反射读取
构建可点击的面包屑链并高亮当前页
遍历解析后的路径段，逐个生成 <navlink></navlink>。前 N−1 项是可跳转链接，最后一项只显示文字（不加链接），通常加 aria-current="page" 和 CSS 类标识当前页。
- 用
NavigationManager.NavigateTo(path)手动跳转时注意避免重复触发LocationChanged - 对含参数的路由（如
/product/123），需保留参数占位符逻辑，例如映射/product/{id}→ "商品详情" - 支持自定义跳过某级（如登录页、错误页不进面包屑），加白名单或忽略标记
封装成可复用的 BreadcrumbNav 组件
把上述逻辑封装为独立 Razor 组件（如 BreadcrumbNav.razor），支持参数如 ExcludePaths="@new[] { "/login", "/error" }" 或 ShowHome="true"。在 App.razor 或主布局中统一放置，实现全站一致。
- 使用
@key确保路径变更时正确刷新 DOM - 配合 CSS 实现分隔符（如
::before { content: ">" }）、悬停效果和响应式折行 - 可选：添加
OnGenerate回调，允许父组件干预最终面包屑项（用于动态标题如 "编辑张三"）
基本上就这些。不复杂但容易忽略路径标准化和参数路由的映射逻辑，建议从简单静态映射起步，再逐步加入元数据和跳转控制。
