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

【问题标题】：How to use dynamic route parts in Blazor WASM app如何在 Blazor WASM 应用程序中使用动态路由部件
【发布时间】：2021-04-14 01:41:14
【问题描述】：

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

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

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

【问题讨论】：

标签： blazor blazor-webassembly

【解决方案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 有很好的解释，https://blazor-university.com/routing/route-parameters/ 也有很好的教程。

【讨论】：

这正是我一直在寻找的方法，但我盲目地去寻找。非常感谢。