BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中

BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中

BootstrapBlazor版本更新到7.9.0后,Menu组件出现首页同时被选中的情况

img

默认首页/路径是选中状态,但是当选中其他路径后,首页路径还是选中状态。
这是因为在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的区别,要不然就会出现多个菜单项被同时选中的情况。

posted @ 2023-08-05 09:41  代码搬运工lee  阅读(188)  评论(0编辑  收藏  举报