Blazor中如何清除页面参数值？

你遇到的是Blazor路由系统的常见问题：当导航到共享部分参数的路由时，未在新路由中定义的参数会被保留在参数集合里，导致组件反复接收到旧值。以下是几种彻底解决的方法：

方法一：使用完整URL强制导航 #

返回不带FunctionIdentifier的路由时，不要用相对路径导航，而是构造完整的目标URL，确保URL中不包含多余参数。比如在组件中注入NavigationManager，然后调用：

// 注入NavigationManager
[Inject]
public NavigationManager NavigationManager { get; set; }

// 返回列表路由的方法
public void GoBackToNode()
{
    NavigationManager.NavigateTo($"/node/{NodeIdentifier}");
}

这种方式会直接替换整个URL，路由系统不会保留之前的FunctionIdentifier参数。

方法二：重写SetParametersAsync手动控制参数赋值 #

通过重写组件的SetParametersAsync方法，根据当前路由模板判断是否需要保留FunctionIdentifier，手动赋值避免旧参数干扰：

[Inject]
public NavigationManager NavigationManager { get; set; }

public Guid NodeIdentifier { get; set; }
public Guid? FunctionIdentifier { get; set; } // 改为可空类型更灵活

public override async Task SetParametersAsync(ParameterView parameters)
{
    // 提取路由参数
    var nodeId = parameters.GetValueOrDefault<Guid>("NodeIdentifier");
    var funcId = parameters.GetValueOrDefault<Guid?>("FunctionIdentifier");

    // 判断当前是否是创建路由
    var currentRoute = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
    var isCreateRoute = currentRoute.Contains("/create/");

    // 非创建路由时，强制清除FunctionIdentifier
    if (!isCreateRoute)
    {
        funcId = null;
    }

    // 手动更新组件参数
    NodeIdentifier = nodeId;
    FunctionIdentifier = funcId;

    // 无需调用base.SetParametersAsync，已手动完成参数设置
    await Task.CompletedTask;
}

这种方法从根源上拦截了参数设置过程，确保只有当前路由需要的参数才会被保留。

方法三：在OnParametersSetAsync中二次校验重置 #

如果不想重写SetParametersAsync，可以在OnParametersSetAsync中根据当前路由路径做二次校验，强制清除多余参数：

protected override async Task OnParametersSetAsync()
{
    var currentPath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
    // 检查当前路径是否匹配不带create的路由
    if (currentPath.Equals($"node/{NodeIdentifier}", StringComparison.OrdinalIgnoreCase))
    {
        // 匹配成功，清除FunctionIdentifier
        FunctionIdentifier = Guid.Empty; // 或null，根据你的定义调整
    }
    await base.OnParametersSetAsync();
}

这种方法在参数被设置后，通过路由匹配判断进行重置，适合不想修改参数设置流程的场景。

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