如何在 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; }
}

您可以限制路由参数，例如 {Page:int}，并且从 .NET 5 开始，可以通过在末尾添加 ? 来可选参数，例如 {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;

}

official documentation has a solid explanation, and https://blazor-university.com/routing/route-parameters/ 也有很好的教程。

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

How to use dynamic route parts in Blazor WASM app

blazor

blazor-webassembly