Blazor - Route to components

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

1.png

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

@page "/counter"
...

像是下面這樣撰寫。

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

2.png

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

3.png