Blazor单页面组件多路由场景下，如何检测路由变更并执行代码？

在Blazor中，同一个组件绑定多个无参数的固定路由时，切换路由不会触发OnParametersSetAsync（因为没有参数变化），可以通过以下两种方案解决：

方法一：监听NavigationManager的LocationChanged事件 #

这是最直接的解决方案，通过订阅路由地址变化事件触发对应搜索逻辑：

1. 注入NavigationManager并声明变量保存当前路径：

[Inject]
private NavigationManager NavManager { get; set; } = default!;
private string? _currentPath;

2. 在组件初始化时订阅事件，执行初始搜索：

protected override async Task OnInitializedAsync()
{
    _currentPath = NavManager.Uri;
    NavManager.LocationChanged += HandleLocationChanged;
    await RunRouteSpecificSearch();
}

3. 实现路由变更处理方法：

private async void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
{
    if (e.Location != _currentPath)
    {
        _currentPath = e.Location;
        await RunRouteSpecificSearch();
        StateHasChanged(); // 若搜索结果需更新UI，调用此方法通知组件刷新
    }
}

4. 添加路由专属搜索逻辑：

private async Task RunRouteSpecificSearch()
{
    var relativePath = NavManager.ToBaseRelativePath(NavManager.Uri);
    
    if (relativePath == "contacts")
    {
        // 执行联系人专属搜索逻辑
    }
    else if (relativePath == "humanresources")
    {
        // 执行人力资源专属搜索逻辑
    }
}

5. 实现IDisposable接口取消订阅，避免内存泄漏：

public void Dispose()
{
    NavManager.LocationChanged -= HandleLocationChanged;
}

记得在Razor组件顶部添加@implements IDisposable。

方法二：将路由转为参数化形式（可选） #

如果允许调整路由结构，可将两个路由转为带参数的形式，利用参数变化触发生命周期方法：

1. 修改组件路由模板：

@page "/{routeType}"
@page "/contacts"
@page "/humanresources"

2. 添加路由参数并实现搜索逻辑：

[Parameter]
public string? RouteType { get; set; }

protected override async Task OnParametersSetAsync()
{
    // 处理默认路由映射，比如访问/contacts时自动设置RouteType
    RouteType ??= NavManager.ToBaseRelativePath(NavManager.Uri);
    await RunRouteSpecificSearch();
}

private async Task RunRouteSpecificSearch()
{
    if (RouteType == "contacts")
    {
        // 联系人搜索逻辑
    }
    else if (RouteType == "humanresources")
    {
        // 人力资源搜索逻辑
    }
}

这种方案无需手动订阅事件，但需要调整原有路由配置。

内容的提问来源于stack exchange，提问作者Chris