如何在 Blazor WASM 应用程序中使用动态路由部分

Question

我即将实现一个具有以下要求的 Blazor WASM 应用程序：该应用程序应该由可以管理多个组织和子组织的用户使用。

因此，我想使用以下 url 结构分隔大部分页面：myapp.test/[organization]/[sub-organization]/[page] 有没有一种方法可以让 blazor 路由处理此类请求myapp.test/[page]，但为我提供组织和子组织的值？我刚刚看到带有自定义 Router 实现的示例，这些示例处理将它们与页面文件夹中的命名空间相匹配的区域，但找不到有关转换为值的动态路由部分的信息。

因为它应该是一个客户端应用程序，所以我认为我不能使用像 nginx 这样的代理将我的 url 重组为myapp.test/[page]?organization=[organization]&&sub=[sub-organization].

Answer 1

使用如下路径创建组件

@page "/{Organization}/{SubOrganization}/{Page:int}"

有了这样的路线，Organization现在 是您可以在组件中使用的参数。

@code{
    [Parameter]
    public String Organization { get; set; }
}

您可以限制路由参数，就像从 .NET 5 开始，参数可以是可选的，只需在末尾{Page:int}添加.?{Page:int?}

这是一个快速演示。

@page "/{Organization}/{SubOrganization}/{Page:int?}"

<dl>
    <dt>Organization</dt>
    <dd>@Organization</dd>

    <dt>Sub Organization</dt>
    <dd>@SubOrganization</dd>

    <dt>Page</dt>
    <dd>@Page</dd>
</dl>

@code{

    [Parameter]
    public String Organization { get; set; }

    [Parameter]
    public String SubOrganization { get; set; }

    [Parameter]
    public Int32 Page { get; set; } = 1;

}

官方文档有详细的解释，https://blazor-university.com/routing/route-parameters/也有很好的教程。