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;
}