Blazor - Route to components

Blazor component 在未加掛 @page directive 時只能像 HTML element 一樣嵌入頁面使用。


如果要能直接當成頁面透過 Routing 訪問,可在 Blazor component 最前面加掛 @page directive,指定 Blazor component 的 routing。

1
2
@page "/counter"
...


像是下面這樣撰寫。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@page "/counter"


<h1>Counter</h1>


<p>Current count: @currentCount</p>


<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>


@code {
int currentCount = 0;


[Parameter]
private int IncrementAmount { get; set; } = 1;


void IncrementCount()
{
currentCount += IncrementAmount;
}
}


就可以透過 Routing 導到該 Blazor component,像是範本內的 Counter 就可以透過 https://localhost:5001/counter 訪問。