Blazor无@page路由组件如何获取URL查询参数Foo？

[SupplyParameterFromQuery] 属性依赖Blazor路由系统工作，只有当组件是路由页面（声明了@page），或是作为路由页面的子组件且参数通过路由上下文传递时，才会自动填充查询参数。你的组件未添加@page，路由系统不会处理它的参数绑定，因此该属性失效。

以下是两种可行的解决方案：

方法一：直接用NavigationManager解析查询参数 #

通过注入NavigationManager获取当前URI，手动解析查询参数，这是最直接的实现方式：

@inject NavigationManager NavManager

@code {
    private string? Foo { get; set; }

    protected override void OnInitialized()
    {
        // 解析当前URI的查询参数
        var uri = new Uri(NavManager.Uri);
        var queryParams = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query);
        
        // 获取Foo参数值
        if (queryParams.TryGetValue("Foo", out var fooValue))
        {
            Foo = fooValue;
        }

        // 测试输出
        Console.WriteLine($"Foo参数值：{Foo}");
    }
}

若为.NET Framework环境，可替换为System.Web.HttpUtility.ParseQueryString解析：

var queryParams = System.Web.HttpUtility.ParseQueryString(uri.Query);
Foo = queryParams["Foo"];

方法二：通过父路由页面传递参数 #

如果你的组件是被带@page的路由页面引用的子组件，可让父页面先获取查询参数，再通过组件参数传递给子组件：

父路由页面（带@page）： #

@page "/test"
@inject NavigationManager NavManager

<!-- 将查询参数传递给子组件 -->
<MyCustomComponent Foo="@FooQueryValue" />

@code {
    private string? FooQueryValue { get; set; }

    protected override void OnInitialized()
    {
        var uri = new Uri(NavManager.Uri);
        var queryParams = QueryHelpers.ParseQuery(uri.Query);
        FooQueryValue = queryParams["Foo"];
    }
}

子组件（无@page）： #

<div>接收到的Foo参数：@Foo</div>

@code {
    // 定义参数接收父页面传递的值
    [Parameter]
    public string? Foo { get; set; }
}

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