初識 Blazor WebAssembly（路由Routing）

路由Routing 

• 元件都會標上@page修飾詞，讓Blazor知道這個元件是可以供路由比對並顯示畫面的。
• @page名稱與href=""是互相對應的，跟檔名無關，例:
  • @page "/movielisttt"
  • href="movielisttt"

1. 路由設定

• 一般路由
  @page "/counter" 
• 參數路由
  @page "/counter/{id:int}"

2. 建立路由導覽時，以NavLink取代<a> 
<NavLink href="頁面URL"> 頁面1 </NavLink>

3. button透過點擊事件，並使用navigation.NavigateTo方法切換路由
<button class="btn btn-primary" @onclick="GoToOne">First</button>
4. a標籤透過href切換路由

@using BlazorStart.Pages
@inject NavigationManager navigation
@* 必要 *@

<div>
    <button class="btn btn-primary" @onclick="GoToOne">First</button>
    <a href="/second">Second</a>
</div>

@code {
    private void GoToOne()
    {
        navigation.NavigateTo("first");
    }

}

 注：

• (HttpClientJsonExtensions) 不會在 URL 前面加上正斜線 (/)
• 任何應用程式的連結前面不會加上正斜線 (/)
• 導覽管理員相對連結前面不會加上正斜線 (/)