web最精妙的設計就是通過url把多個頁面串聯起來，並且可以互相跳轉。我們開發系統的時候總是需要使用路由來實現頁面間的跳轉。傳統的web開發主要是使用a標籤或者是服務端redirect來跳轉。那今天來看看Blazor是如何進行路由的。 ## 使用@page指定元件的路由path 我們可以在Blazor裡給每個元件指定一個path，當路由匹配的時候會顯示這個元件。 ``` @page "/page/a"

PAGE A

@code { } ``` 訪問/page/a 看到Page A頁面被渲染出來了。  > 注意：如果是在瀏覽器裡敲入url按回車切換頁面，會發生一次http請求，然後重新渲染blazor應用。 ## 使用a標籤進行頁面跳轉 a標籤作為超連結是我們web開發最常用的跳轉方式，blazor同樣支援。 新建Page B ``` @page "/page/b"

PAGE B

@code { } ``` 在Page A頁面新增一個a標籤進行跳轉： ``` @page "/page/a"

PAGE A

Page B

@code { } ``` 執行一下試試：  > 注意：使用a連線在頁面間進行跳轉不會發生http請求到後臺，頁面是直接在前端渲染出來的。 ## 通過路由傳參 通過http的url進行頁面間傳參是我們web開發的常規操作。下面我們演示下如何從Page A傳遞一個引數到Page B。我們預設Page A裡面有個UserName需要傳遞到Page B，並且顯示出來。 ### 通過path傳參 通過url傳參一般有兩種方式，一種是直接把引數組合在path裡，比如“/page/b/小明”這樣。 修改Page A： ``` @page "/page/a"

PAGE A

Page B

@code { private string userName = "小明"; } ``` 通過把userName組合到path上傳遞給Page B。 修改Page B： ``` @page "/page/b/{userName}"

PAGE B

userName: @userName

@code { [Parameter] public string userName { get; set; } } ``` Page B 使用一個“/page/b/{userName}” pattern來匹配userName,並且userName需要標記[Parameter]並且設定為public。  ### 通過QueryString傳參 除了把引數直接拼接在path裡，我們還習慣通過QueryString方式傳遞，比如“/page/b?username=小明”。 修改Page A： ``` @page "/page/a"

PAGE A

Page B

@code { private string userName = "小明"; } ``` 首先安裝一個工具庫： ``` Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.2.0 ``` 修改Page B： ``` @page "/page/b"

PAGE B

userName: @UserName

@using Microsoft.AspNetCore.WebUtilities; @inject NavigationManager NavigationManager; @code { [Parameter] public string UserName { get; set; } protected override void OnInitialized() { var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri); QueryHelpers.ParseQuery(uri.Query).TryGetValue("username", out Microsoft.Extensions.Primitives.StringValues userName); Console.WriteLine(NavigationManager.Uri); UserName = userName.ToString(); Console.WriteLine(UserName); base.OnInitialized(); } } ``` 頁面獲取QueryString的傳參比較麻煩，Blazor並沒有進行封裝。所以我們需要通過QueryHelpers.ParseQuery方法手工把QueryString格式化成字典形式，然後獲取對應的引數。QueryHelpers類存在Microsoft.AspNetCore.WebUtilities這個庫裡，需要通過nuget安裝。  ## NavLink NavLink是個導航元件，它其實就是封裝了a標籤。當選中的時候，也就是當前的url跟它的href一致的時候，會自動在class上加上active類，所以可以用來控制選中的樣式。預設的3個導航選單就是用的NavLink。 比如導航到counter的NavLink： ``` ``` 最後翻譯成html： ``` Counter ``` ## NavigationManager 有的時候我們可能需要在程式碼裡進行導航，如果是JavaScript我們會用window.location來切換頁面，Blazor為我們提供了相應的封裝：NavigationManager。使用NavigationManager可以通過程式碼直接進行頁面間的跳轉。我們在Page A頁面放個按鈕然後通過按鈕的點選事件進行跳轉： ``` @page "/page/a"

PAGE A

go to B

@inject NavigationManager NavigationManager @code { private void GoToB() { NavigationManager.NavigateTo("/page/b?username=小貓"); } } ``` 修改Page A的程式碼，注入NavigationManager物件，通過NavigationManager.NavigateTo方法進行跳轉。  ### 擴張Back方法 Blazor封裝的NavigationManager咋一看以為跟WPF的NavigationService一樣，我想當然的覺得裡面肯定有個Back方法可以進行後退。但是查了一番發現還真的沒有，這就比較尷尬了，沒辦法只能使用JavaScript來實現了。 為了方便我們給NavigationManager直接寫個擴充套件方法吧。 首先修改Program把IServiceCollection暴露出來： ``` public class Program { public static IServiceCollection Services; public static async Task Main(string[] args) { var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootCompon