原文鏈接：https://blazor-university.com/routing/optional-route-parameters/

可選路由參數

Blazor 不明確支持可選路由參數，但可以通過在組件上添加多個 @page 聲明輕松實現等效。例如，更改標準 Counter.razor 頁面以添加額外的 URL。

@page?"/counter"
@page?"/counter/{CurrentCount:int}"

將 int currentCount 字段更改為參數，如下所示

[Parameter]?public?int?CurrentCount?{?get;?set;?}

然后用 CurrentCount 替換所有對 currentCount 的引用。還在頁面上添加一些導航，以便我們可以快速測試我們的路由

@page?"/counter"
@page?"/counter/{CurrentCount:int}"<h1>Counter</h1><p>Current?count:?@CurrentCount</p><button?class="btn?btn-primary"?@onclick=IncrementCount>Click?me</button><ul><li><a?href="/counter/42">Navigate?to?/counter/42</a></li><li><a?href="/counter/123">Navigate?to?/counter/123</a></li><li><a?href="/counter/">Navigate?to?/counter</a></li>
</ul>@code?{[Parameter]public?int?CurrentCount?{?get;?set;?}void?IncrementCount(){CurrentCount++;}
}

當我們運行這個應用程序時，我們看到我們可以導航到 /counter（不需要參數）或 /counter/AnyNumber（指定參數值）。當 URL 中沒有指定值時，將使用屬性類型的默認值。

為可選參數指定默認值

如果我們希望參數的默認值不是 C# 默認值怎么辦？例如，當沒有指定 CurrentCount 的值時，我們可能希望它默認為 1 而不是 0。

首先，我們需要將參數屬性的類型更改為可空，這樣我們就可以區分 /counter/0 和只是 /counter 之間的區別——如果它為空，則將默認值分配給該屬性。

[Parameter]
public?int??CurrentCount?{?get;?set;?}protected?override?void?OnInitialized()
{base.OnInitialized();CurrentCount?=?CurrentCount????1;
}

起初這似乎可行，導航到 /counter 實際上會將我們的 CurrentCount 值默認為 1。

但是，這僅在頁面第一次顯示時有效。如果我們現在使用其中一個鏈接導航到 /counter 而不先導航到另一個頁面（例如 Home），我們將看到 CurrentCount 默認為 null。

源代碼^[1]

當組件是 @page 并且我們的 Blazor 應用導航到呈現相同頁面的新 URL 時，Blazor 不會創建組件的新實例來呈現頁面，而是將其視為具有更改參數的相同頁面.因為這個 OnInitialized 只會在第一次創建頁面時執行。有關詳細信息，請參閱組件生命周期^[2]。

上一個 URL	當前 URL	是否執行 Counter.OnInit
/	/counter	是 – 不同的頁面
/counter	/counter/42	否 - 同一頁面
/counter/42	counter/123	否 – 同一頁面
/counter	/	是 - 不同的頁面

正確的解決方案是在 SetParametersAsync 中設置默認值——只要參數發生變化并且它們的值被推送到組件的屬性中，例如在導航期間，就會調用該值。

[Parameter]
public?int??CurrentCount?{?get;?set;?}public?async?override?Task?SetParametersAsync(ParameterView?parameters)
{await?base.SetParametersAsync(parameters);CurrentCount?=?CurrentCount????1;
}

404 – Not found

當 Blazor 無法將 URL 與組件匹配時，我們可能想告訴它要顯示什么內容。

Router 組件有一個名為 NotFound 的 RenderFragment 參數^[3]，它是一個 RenderFragment^[4]。當嘗試訪問無法與任何組件匹配的 URL 時，將顯示在 Router 組件的此參數中定義的任何 Razor 標記。

<Router?AppAssembly="typeof(Program).Assembly"><Found?Context="routeData"><RouteView?RouteData="routeData"?/></Found><NotFound><div?class="content"><h1>PAGE?NOT?FOUND</h1><p>The?page?you?have?requested?could?not?be?found.?<a?href="/">Return?to?the?home?page.</a></p></div></NotFound>
</Router>

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Routing/OptionalRouteParameters