Blazor组件中通过NavigationManager获取当前URL以设置元素样式

嘿，我看到你想要通过获取当前页面URL来给元素动态应用特定样式，之前用的是IUriHelper对吧？不过这个API在Blazor的新版本里已经被弃用了，官方现在推荐用NavigationManager来做这件事，我给你整理了完整的实现方案，包括路由监听和样式判断的两种方式：

1. 替换IUriHelper：用NavigationManager获取并监听URL #

首先在组件里注入NavigationManager，同时实现IDisposable来清理路由监听的订阅，避免内存泄漏：

@using Microsoft.AspNetCore.Components
@inject NavigationManager NavManager
@implements IDisposable

<h1>当前页面URL：@currentUrl</h1>

然后在代码块里处理初始URL获取和路由变化监听：

@code {
    private string currentUrl;
    private IDisposable _routeChangeSubscription;

    protected override void OnInitialized()
    {
        // 页面加载时先获取初始URL
        currentUrl = NavManager.Uri;
        // 订阅路由变化事件，URL更新时自动触发
        _routeChangeSubscription = NavManager.LocationChanged += OnRouteChanged;
    }

    private void OnRouteChanged(object sender, LocationChangedEventArgs e)
    {
        currentUrl = e.Location;
        StateHasChanged(); // 通知组件更新UI
    }

    public void Dispose()
    {
        // 组件销毁时取消订阅，释放资源
        _routeChangeSubscription?.Dispose();
    }
}

2. 根据URL判断并应用特定样式 #

结合你提到的导航栏场景，这里有两种常用方式：

方式一：用NavLink内置的活跃状态（最推荐） #

NavLink组件本身就自带路由匹配判断，当当前URL和它的href匹配时，会自动添加active类，你只需要在CSS里定义好active样式就行：

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">Blazor</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li>
                <!-- Match="NavLinkMatch.All" 确保只有根路径完全匹配时才激活 -->
                <NavLink href="/" Match="NavLinkMatch.All">首页</NavLink>
            </li>
            <li>
                <NavLink href="/about">关于我们</NavLink>
            </li>
        </ul>
    </div>
</nav>

对应的CSS样式：

.nav-wrapper .active {
    color: #2196F3;
    font-weight: 600;
    border-bottom: 2px solid #2196F3;
}

方式二：自定义判断逻辑（针对非NavLink元素） #

如果是自定义元素，没法用NavLink的话，可以自己写方法判断当前URL是否匹配目标路径，然后动态添加样式类：

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">Blazor</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li class="@GetActiveClass("/")">
                <a href="/">首页</a>
            </li>
            <li class="@GetActiveClass("/about")">
                <a href="/about">关于我们</a>
            </li>
        </ul>
    </div>
</nav>

然后在代码块里添加判断方法：

private string GetActiveClass(string targetPath)
{
    // 把当前URL转换成相对路径（去掉基址），再和目标路径比较
    var currentRelativePath = NavManager.ToBaseRelativePath(currentUrl);
    // 忽略大小写，确保匹配准确
    return currentRelativePath.Equals(targetPath.TrimStart('/'), StringComparison.OrdinalIgnoreCase)
        ? "active"
        : string.Empty;
}

这样就能根据当前页面URL，动态给对应的元素加上你想要的特定样式啦。

内容的提问来源于stack exchange，提问作者Carlos L.