Blazor-路由模板（下）

路由约束

类型约束

我们这里使用{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; }
}