探索路由參數如何影響 Blazor 應用程式的路由傳送
到目前為止，在此 Blazor 課程模組中，您了解如何使用 URI 組件，將要求路由傳送至正確的元件。 您也可以使用路由參數來攔截 URI 的其他組件，並在程式碼中存取。
假設您正在處理披薩外送公司的網站，並將披薩要求路由傳送至 Pizzas.razor 元件。 現在，您想要從 URI 取得使用者最愛的披薩，並用它來顯示使用者可能會喜歡的其他披薩相關資訊。
在這裡，您了解如何使用路由參數來指定在程式碼中處理的 URL 組件。
注意
本單元中的程式碼區塊是說明範例。 您會在下一個單元中撰寫自己的程式碼。
路由參數
稍早在本課程模組中，您已了解如何使用使用者要求的 URI 部分，將要求路由傳送至正確的元件。 您通常會想要使用 URI 的其他部分作為轉譯頁面中的值。 例如，假設使用者要求：
http://www.contoso.com/favoritepizza/hawaiian
藉由使用 @page 指示詞，您了解如何將此要求路由傳送至 FavoritePizza.razor 元件 (舉例)。 現在您想要在元件中使用值夏威夷。 若要取得此值，您可以將它宣告為路由參數。
使用 @page 指示詞來指定將傳遞至元件作為路由參數的 URI 組件。 在元件的程式碼中，您可以取得路由參數的值，方式與取得元件參數的值相同：
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
上述程式碼會在 @page 指示詞中使用大括弧來指定路由參數，並提供名稱。
注意
元件參數是從父元件傳送至子元件的值。 在父代中，您將元件參數值指定為子元件標籤的屬性。 路由參數的指定方式不同。 它們會指定為 URI 的一部分。 Blazor 路由器會在暗中攔截這些值，並將其傳送至元件作為元件值，這就是您以相同方式存取這些值的原因。 路由參數不區分大小寫，而且會轉送到具有相同名稱的元件參數。
選用的路由參數
在前述範例中，{favorite} 是必要參數。 若要讓路由參數成為選用的，請使用問號：
@page "/FavoritePizzas/{favorite?}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
protected override void OnInitialized()
{
Favorite ??= "Fiorentina";
}
}
最好是設定選用參數的預設值。 在上述範例中，Favorite 參數的預設值是在 OnInitialized 方法中設定。
注意
OnInitialized 方法會在使用者第一次要求頁面時執行。 如果使用不同的路由參數要求相同頁面，則該方法不會執行。 例如，如果您預期使用者從 http://www.contoso.com/favoritepizza/hawaiian 移至 http://www.contoso.com/favoritepizza，請改為在 OnParametersSet() 方法中設定預設值。
路由條件約束
在先前的範例中，要求 URI http://www.contoso.com/favoritepizza/2 的結果是無意義的訊息「您最愛的披薩是：2」。 在其他情況下，像這樣的類型不符可能會造成例外狀況，並向使用者顯示錯誤。 請考慮指定路由參數的類型：
@page "/FavoritePizza/{preferredsize:int}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza size is: @FavoriteSize inches.</p>
@code {
[Parameter]
public int FavoriteSize { get; set; }
}
在此範例中，如果使用者要求 http://www.contoso.com/favoritepizza/margherita，則與前述元件不相符。 因此，要求會路由傳送到其他地方。 如果使用者要求 http://www.contoso.com/favoritepizza/12，則會有路由比對，而元件會顯示訊息您最愛的披薩大小為：12 英吋。 路由參數的特定類型，如下所示，稱為路由條件約束。 您可以在條件約束中使用下列其他類型：
| 條件約束 | 範例 | 範例相符項 |
|---|---|---|
| bool | {vegan:bool} | http://www.contoso.com/pizzas/true |
| Datetime | {birthdate:datetime} | http://www.contoso.com/customers/1995-12-12 |
| decimal | {maxprice:decimal} | http://www.contoso.com/pizzas/15.00 |
| double | {weight:double} | http://www.contoso.com/pizzas/1.234 |
| float | {weight:float} | http://www.contoso.com/pizzas/1.564 |
| guid | {pizza id:guid} | http://www.contoso.com/pizzas/CD2C1638-1638-72D5-1638-DEADBEEF1638 |
| long | {totals ales:long} | http://www.contoso.com/pizzas/568192454 |
設定 catch-all 路由參數
請考慮本單元稍早所述的下列元件：
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
現在假設使用者嘗試藉由要求 URI http://www.contoso.com/favoritepizza/margherita/hawaiian 來指定兩個我的最愛。 頁面會顯示訊息「您最愛的披薩是：瑪格麗特」，並忽略子資料夾夏威夷。 您可以使用 catch-all 路由參數來變更此行為，以擷取跨多個 URI 資料夾界限的路徑 (正斜線)。 在路由參數名稱前加上星號 (*) 作為前置詞，可以讓路由參數擷取全部：
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
使用相同的要求 URI，頁面現在會顯示訊息「您最愛的披薩是：瑪格麗特/夏威夷」。