BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中
BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中
BootstrapBlazor版本更新到7.9.0后,Menu组件出现首页同时被选中的情况
默认首页/
路径是选中状态,但是当选中其他路径后,首页路径还是选中状态。
这是因为在BootstrapBlazor组件最新版中支持了一个新特性。可以在路径后面添加#xxx这种格式
默认情况下是NavLinkMatch.Prefix
,要解决这个问题很简单,只需要单独把首页/
修改为NavLinkMatch.All
就可以了
razor代码
<Menu Items="@_menuItems" IsVertical="true" />
C#代码
private List<MenuItem>? _menuItems;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
_menuItems = CreateMenuItems(Menu.Where(x => x.Roles!.Any(y => y.Id == RoleId)).OrderBy(x => x.Seq).ToList(), 0);
}
private List<MenuItem> CreateMenuItems(List<Menu> menus, int parentId)
{
var selectedMenus = new List<MenuItem>();
var selectedMenuEntities = menus.Where(x => x.ParentId == parentId).ToList();
foreach (var menuEntity in selectedMenuEntities)
{
var menuItem = new MenuItem(menuEntity.Name!, menuEntity.Url, menuEntity.Icon)
{
Items = CreateMenuItems(menus, menuEntity.Id)
};
//判断是否首页
if (menuItem.Url == "/")
{
//需要引入命名空间:Microsoft.AspNetCore.Components.Routing
menuItem.Match = NavLinkMatch.All;
}
selectedMenus.Add(menuItem);
}
return selectedMenus;
}
Menu组件在使用中需要特别注意NavLinkMatch.Prefix和NavLinkMatch.All的区别,要不然就会出现多个菜单项被同时选中的情况。
分类:
Blazor
标签:
BootstrapBlazor
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!