如何加载具有不同参数的同一 Blazor 页面并点击相同的 url，并将参数显示到 Blazor 中的 UI？

Question

我是Web/Blazor开发新手，所以我找不到如何搜索以下问题。

我目前正在 .NET 6 中的 Blazor.Server 项目工作，我想加载相同的页面，点击以下 URL 之一：

https://localhost:7226/1 https://localhost:7226/2 https://localhost:7226/3

每次点击上述网址之一，我想加载相同的 Index.razor 页面，同时我需要将参数（1,2或3）读取到变量作为参数并显示相同的页面带有显示 ID/参数编号的标签元素。

如何实现这个功能？

Answer 1

路由约束强制将路由段与组件进行类型匹配。

@page "/"
@page "/{Id:int}"

<p>Current id is: @Id</p>

@code {
    [Parameter] public int Id { get; set; }
}

在此示例中，

Id

段是整数 (

int

) 类型。

---

可以使用下表所示的路线限制。

约束	示例	比赛示例	不变 文化 匹配
bool	{active:bool}	true ， FALSE	没有
datetime	{dob:datetime}	2016-12-31 ， 2016-12-31 7:32pm	是的
decimal	{price:decimal}	49.99 ， -1,000.01	是的
double	{weight:double}	1.234 ， -1,001.01e8	是的
float	{weight:float}	1.234 ， -1,001.01e8	是的
guid	{id:guid}	CD2C1638-1638-72D5-1638-DEADBEEF1638 ， {CD2C1638-1638-72D5-1638-DEADBEEF1638}	没有
int	{id:int}	123456789 ， -123456789	是的
long	{ticks:long}	123456789 ， -123456789	是的

警告

验证 URL 并转换为 CLR 类型（例如 int 或 DateTime）的路由约束始终使用不变区域性。这些约束假设 URL 不可本地化。

---

有关更多信息，请参阅：ASP.NET Core Blazor 路由和导航

---