Blazor-路由模板（下）

embedded/2025/3/6 7:11:33/

路由约束

类型约束

我们这里使用{id:int}限制路由，id为int类型，并且路由参数 id 对应的 Id 属性也必须是 int 类型。我们试试能否正常访问

@page "/demoPage/{id:int}"
<h3>demoPage</h3>
<h2>路由参数Id：@Id</h2>
@code {[Parameter]public int Id { get; set; }
}

在这里插入图片描述

int类型路由可以正常访问
在这里插入图片描述

使用字符串无法访问到该路由

常见类型约束

在这里插入图片描述

函数约束

路由模板中，可以执行函数，用来验证路由参数值是否符合约束要求。
我们在这里为id添加了约束{id:max(100)}

@page "/demoPage/{id:max(100)}"
<h3>demoPage</h3>
<h2>路由参数Id：@Id</h2>
@code {[Parameter]public int Id { get; set; }
}

运行结果
在这里插入图片描述

运行后我们发现发生了报错，这是因为
使用@page 指令指定路由模板，则所有函数约束所应用的路由参数必须是 string 类型，框架不提供强制自动转换。
我们修改为string试试效果如何

@page "/demoPage/{id:max(100)}"
<h3>demoPage</h3>
<h2>路由参数Id：@Id</h2>
@code {[Parameter] public string Id { get; set; } = null!;
}

在这里插入图片描述

这次运行正常了，并且超出路由限制的无法访问

catch-all 路由

@page "/demoPage/{*AnyRoute}"
<h3>demoPage</h3>
<h2>路由参数：@AnyRoute</h2>
@code {[Parameter] public string? AnyRoute { get; set; }
}

定义的 AnyRoute 参数属性为任意路由参数，必须为 string 类型。
在路由模板中，要在任意路由参数前面使用 * 通配符，并放在{}内，如{*AnyRoute}。

获取路由查询参数

当路由中携带查询参数时，如路由/demoPage?a=abc&b=4,遇到这类参数时，我们需要使用[SupplyParameterFromQuery]特性标记变量来获取参数

@page "/demoPage"
<h3>demoPage</h3>
<h2>路由查询参数：@A</h2>
<h2>路由查询参数：@B</h2>
@code {[SupplyParameterFromQuery] public string? A { get; set; }[SupplyParameterFromQuery] public string? B { get; set; }
}

在这里插入图片描述

如上的方式就可以获取参数a，b的值

查询参数别名

我们还可以通过设置别名的方式，对查询参数进行获取，以应对参数查询名称和我们想声明的变量名称不一致的情况。
这样的方式我们仍然可以读取到参数

@page "/demoPage"
<h3>demoPage</h3>
<h2>路由查询参数：@Parameter</h2>
<h2>路由查询参数：@B</h2>
@code {[SupplyParameterFromQuery(Name = "a")] public string? Parameter { get; set; }[SupplyParameterFromQuery] public string? B { get; set; }
}

在这里插入图片描述

数组查询参数

我们将参数直接使用数组进行接收即可，如下

@page "/demoPage"
<h3>demoPage</h3>
<h2>路由查询参数：</h2>
@if (Parameter is not null)
{<ul>@foreach (var item in Parameter){<p>@item</p>}</ul>}
<h2>路由查询参数：@B</h2>
@code {[SupplyParameterFromQuery(Name = "a")] public string[]? Parameter { get; set; }[SupplyParameterFromQuery] public string? B { get; set; }
}