Razor组件——路由

路由

客户端路由可以通过使用

@page

指令装饰组件来在blazor中完成，如前面的示例中所示，

//ParentComponent.razor
@page "/parent-component"

<h3> Parent Component</h3>
<p>String in Parent: @parentString</p>
<button onclick="@PassToChild">Pass String To Child</button>
           

这

/parent-component

是来自根URI的路由路径。如果我们将这些组件* .razor文件移动到Pages文件夹中的任何子文件夹，路由仍然有效。

＃路由参数

可以使用Route Parameters将参数作为查询字符串传递给组件，下面的代码指定

RouteId

类型

int

可以与/ bindings / routing路径一起传递，

//RouteParamComponent.razor
@page "/bindings/{RouteId:int}"

<p>Route Parameter: @RouteId.ToString()</p> 

@functions {
    [Parameter]
    private int RouteId { get; set; }
}
           

组件可以有多个路由

//MultipleRouteComponent.razor
@page "/bind"
@page "/bindings"
@page "/one-way-bindings"

<p>Routing</p> 

@functions {
    [Parameter]
    private int sample { get; set; } = 100;
}