如何在Blazor+Tailwind中子菜单页面激活主菜单ActiveClass

方法一：使用NavLinkMatch.Prefix匹配前缀路由 #

这是最直接的解决方案，适合子页面路由是主菜单项路由前缀的场景（比如主菜单路径为/Blog，子页面路径为/Blog/Article1）。

修改主菜单项的NavLink组件，将Match属性从NavLinkMatch.All改为NavLinkMatch.Prefix：

<NavLink ActiveClass="custom-nav-menu-link-active" Match="NavLinkMatch.Prefix" href="@menuItem.HrefValue">Blog</NavLink>

NavLinkMatch.Prefix会让主菜单项在当前URL以其href值开头时自动激活，访问子页面时主菜单的custom-nav-menu-link-active类会被正确添加。

方法二：自定义激活逻辑（适用于复杂路由场景） #

如果子页面路由不是主菜单项的前缀（比如主菜单路径为/Blog/Home，子页面路径为/Blog/Articles/1），可以通过NavigationManager手动判断当前URL是否属于该主菜单的页面集合，动态添加激活类。

1. 首先注入NavigationManager：

@inject NavigationManager NavManager

2. 用容器包裹主菜单项，通过自定义方法判断是否添加激活类：

<div class="@GetMainMenuActiveClass(menuItem)">
    <NavLink href="@menuItem.HrefValue">Blog</NavLink>
    <ul id="submenu">
        @foreach (var subItem in menuItem.Items)
        {
            <li>
                <NavLink href="@subItem.HrefValue" Match="NavLinkMatch.All">
                    @subItem.Text
                    @if (!string.IsNullOrWhiteSpace(subItem.ArrowDropdownUrl))
                    {
                        <img src="@subItem.ArrowDropdownUrl" alt="Dropdown Icon" class="iconmenuwithicon" />
                    }
                </NavLink>
            </li>
        }
    </ul>
</div>

3. 在@code块中实现判断方法：

private string GetMainMenuActiveClass(MenuItem menuItem)
{
    var currentPath = NavManager.ToBaseRelativePath(NavManager.Uri);
    
    // 检查当前路径是否匹配主菜单项路径
    if (string.Equals(currentPath, menuItem.HrefValue.TrimStart('/'), StringComparison.OrdinalIgnoreCase))
    {
        return "custom-nav-menu-link-active";
    }
    
    // 检查当前路径是否匹配任何子菜单项路径
    foreach (var subItem in menuItem.Items)
    {
        if (currentPath.StartsWith(subItem.HrefValue.TrimStart('/'), StringComparison.OrdinalIgnoreCase))
        {
            return "custom-nav-menu-link-active";
        }
    }
    
    return string.Empty;
}

这个方法会同时检查当前URL是否匹配主菜单项本身，或者任何子菜单项的路径，确保主菜单在所有关联页面都能正确激活。

内容的提问来源于stack exchange，提问作者Lucas Mikó