Blazor入手教程（四）路由
路由
路由
而Blazor中使用 @page “url路徑” 來表示路由地址，比如/counter，那么該頁面的請求地址就是域名:端口號/counter
更深層次也很簡單
Vue工程一般使用一個獨立的文件route.js來統一管理配置路由。在這一點上，Blazor較為省事，而vue控制性較強。
一般在app.razor文件可以看到路由視圖的定義，這個稱之為路由模板，當找到相匹配的視圖時，會在<Found></Found>節點里面渲染出來，如果沒有的話會在<NotFound></NotFound>節點里面渲染，當然你也可以自定義一個404的頁面。里面的DefaultLayout表示默認布局組件，Layout表示指定的布局組件，這些會在后面你的Layout里面講到
路由參數
設置路由參數只需要兩步就可以設置路由參數
1，在@page 后面的url中使用{路由參數名}的占位符格式標明
2，在@code里面申名一個帶有[Parameter]特性的屬性，這里是不分大小寫的，Keyword也可以獲取到
@page "/RouteParameter/{keyword}"
<h3>路有參數</h3>
@code {
[Parameter]
public string keyword { get; set; }
protected override void OnInitialized()
{
Console.WriteLine("keyword=" + keyword);
}
}
值得注意的是，當我們的路由參數缺失的時候，他會認為這個我們定義的路由不匹配。所以也就不會渲染這個頁面。
路由約束
{路有參數名:參數類型} 表示路由約束，可以限定參數的類型，當參數類型不匹配時
假設我們這里的keyword傳入的是123a，轉換成int時會失敗，他這里就找不到這個參數
@page "/RouteParameterConstraints/{keyword:int}"
<h3>路由約束</h3>
@code {
[Parameter]
public int keyword { get; set; }
protected override void OnInitialized()
{
Console.WriteLine("keyword=" + keyword);
}
}
獲取查詢字符串
Vue中可以使用 this.$route.query.參數名來獲取查詢參數值
而Blazor使用NavigationManager.Uri這個對象來獲取查詢參數
@page "/querystring"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavigationManager
<h3>查詢字符串</h3>
<p>keyword Value: @keyword</p>
<p>state Value: @state</p>
@code {
private string keyword = "";
private string state = "0";
protected override void OnInitialized()
{
var query = new Uri(NavigationManager.Uri).Query;
Console.WriteLine("query=" + query);
if (QueryHelpers.ParseQuery(query).TryGetValue("keyword", out var keyword))
{
Console.WriteLine("keyword=" + keyword);
}
if (QueryHelpers.ParseQuery(query).TryGetValue("state", out var state))
{
Console.WriteLine("state=" + state);
}
}
}
這里就可以獲取到整個的查詢字符串。
當然，更常見的情況是需要解析出每個參數的key和value。你可以自己手動編寫一個解析查詢參數的方法，或者使用微軟官方提供的一個工具包Microsoft.AspNetCore.WebUtilities中提供的方法。可以在nuget上安裝。
安裝完成后，引入命名空間，使用QueryHelpers.ParseQuery()方法就可以轉換參數
結果
NavLink和a標簽
Vue中有自帶的<route-link></route-link>組件來渲染a標簽
而 Blazor中有個NavLink組件。功能基本一致。他們最終會渲染成a標簽。
不過NavLink組件提供了一個Match的參數，可以根據當前的url來匹配。 如果當前頁面的url和該標簽的href匹配，會給他追加上一個 active的class。而且這個匹配有兩種可供選擇，NavLinkMatch.Prefix（匹配前綴）， NavLinkMatch.All（匹配全部）
相關代碼
@page "/navlinkanda"
<h3>NavLink和a標簽</h3>
<NavLink href="http://www.baidu.com">鏈接到外部地址</NavLink>
<NavLink href="/querystring?keyword=abc&state=1">連接到站內地址</NavLink>
<NavLink href="/navlinkanda" Match="NavLinkMatch.Prefix">匹配前綴</NavLink>
<NavLink href="/navlinkanda?k=123" Match="NavLinkMatch.All">匹配全部</NavLink>
@code {
}