Blazor 动态生成面包屑导航栏教程

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 属性，由面包屑组件反射读取

构建可点击的面包屑链并高亮当前页

遍历解析后的路径段，逐个生成 。前 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 回调，允许父组件干预最终面包屑项（用于动态标题如 "编辑张三"）

基本上就这些。不复杂但容易忽略路径标准化和参数路由的映射逻辑，建议从简单静态映射起步，再逐步加入元数据和跳转控制。