web最精妙的設(shè)計(jì)就是通過url把多個(gè)頁(yè)面串聯(lián)起來，并且可以互相跳轉(zhuǎn)。我們開發(fā)系統(tǒng)的時(shí)候總是需要使用路由來實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)。傳統(tǒng)的web開發(fā)主要是使用a標(biāo)簽或者是服務(wù)端redirect來跳轉(zhuǎn)。那今天來看看Blazor是如何進(jìn)行路由的。

使用@page指定組件的路由path

我們可以在Blazor里給每個(gè)組件指定一個(gè)path，當(dāng)路由匹配的時(shí)候會(huì)顯示這個(gè)組件。

@page "/page/a"<h2>PAGE A</h2> @code { }

訪問/page/a 看到Page A頁(yè)面被渲染出來了。

注意：如果是在瀏覽器里敲入url按回車切換頁(yè)面，會(huì)發(fā)生一次http請(qǐng)求，然后重新渲染blazor應(yīng)用。

使用a標(biāo)簽進(jìn)行頁(yè)面跳轉(zhuǎn)

a標(biāo)簽作為超鏈接是我們web開發(fā)最常用的跳轉(zhuǎn)方式，blazor同樣支持。
新建Page B

@page "/page/b"<h2>PAGE B</h2> @code { }

在Page A頁(yè)面添加一個(gè)a標(biāo)簽進(jìn)行跳轉(zhuǎn)：

@page "/page/a"<h2>PAGE A</h2> <p><a href="/page/b">Page B</a> </p> @code { }

運(yùn)行一下試試：

注意：使用a連接在頁(yè)面間進(jìn)行跳轉(zhuǎn)不會(huì)發(fā)生http請(qǐng)求到后臺(tái)，頁(yè)面是直接在前端渲染出來的。

通過路由傳參

通過http的url進(jìn)行頁(yè)面間傳參是我們web開發(fā)的常規(guī)操作。下面我們演示下如何從Page A傳遞一個(gè)參數(shù)到Page B。我們預(yù)設(shè)Page A里面有個(gè)UserName需要傳遞到Page B，并且顯示出來。

通過path傳參

通過url傳參一般有兩種方式，一種是直接把參數(shù)組合在path里，比如“/page/b/小明”這樣。

修改Page A：

@page "/page/a"<h2>PAGE A</h2> <p><a href="/page/b/@userName">Page B</a> </p> @code {private string userName = "小明"; }

通過把userName組合到path上傳遞給Page B。

修改Page B：

@page "/page/b/{userName}"<h2>PAGE B</h2> <p>userName: @userName </p> @code {[Parameter]public string userName { get; set; } }

Page B 使用一個(gè)“/page/b/{userName}” pattern來匹配userName,并且userName需要標(biāo)記[Parameter]并且設(shè)置為public。

通過QueryString傳參

除了把參數(shù)直接拼接在path里，我們還習(xí)慣通過QueryString方式傳遞，比如“/page/b?username=小明”。

修改Page A：

@page "/page/a" <h2>PAGE A </h2> <p><a href="/page/b?username=@userName">Page B</a> </p> @code {private string userName = "小明"; }

首先安裝一個(gè)工具庫(kù)：

Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.2.0

修改Page B：

@page "/page/b" <h2>PAGE B </h2> <p>userName: @UserName </p> @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();} }

頁(yè)面獲取QueryString的傳參比較麻煩，Blazor并沒有進(jìn)行封裝。所以我們需要通過QueryHelpers.ParseQuery方法手工把QueryString格式化成字典形式，然后獲取對(duì)應(yīng)的參數(shù)。QueryHelpers類存在Microsoft.AspNetCore.WebUtilities這個(gè)庫(kù)里，需要通過nuget安裝。

NavLink

NavLink是個(gè)導(dǎo)航組件，它其實(shí)就是封裝了a標(biāo)簽。當(dāng)選中的時(shí)候，也就是當(dāng)前的url跟它的href一致的時(shí)候，會(huì)自動(dòng)在class上加上active類，所以可以用來控制選中的樣式。默認(rèn)的3個(gè)導(dǎo)航菜單就是用的NavLink。

比如導(dǎo)航到counter的NavLink：

<NavLink class="nav-link" href="counter"><span class="oi oi-plus" aria-hidden="true"></span> Counter</NavLink>

最后翻譯成html：

<a href="counter" class="nav-link active"><span class="oi oi-plus" aria-hidden="true"></span> Counter </a>

NavigationManager

有的時(shí)候我們可能需要在代碼里進(jìn)行導(dǎo)航，如果是JavaScript我們會(huì)用window.location來切換頁(yè)面，Blazor為我們提供了相應(yīng)的封裝：NavigationManager。使用NavigationManager可以通過代碼直接進(jìn)行頁(yè)面間的跳轉(zhuǎn)。我們?cè)赑age A頁(yè)面放個(gè)按鈕然后通過按鈕的點(diǎn)擊事件進(jìn)行跳轉(zhuǎn)：

@page "/page/a" <h2>PAGE A </h2> <p><button @onclick="GoToB">go to B</button> </p> @inject NavigationManager NavigationManager @code {private void GoToB(){NavigationManager.NavigateTo("/page/b?username=小貓");} }

修改Page A的代碼，注入NavigationManager對(duì)象，通過NavigationManager.NavigateTo方法進(jìn)行跳轉(zhuǎn)。

擴(kuò)展Back方法

Blazor封裝的NavigationManager咋一看以為跟WPF的NavigationService一樣，我想當(dāng)然的覺得里面肯定有個(gè)Back方法可以進(jìn)行后退。但是查了一番發(fā)現(xiàn)還真的沒有，這就比較尷尬了，沒辦法只能使用JavaScript來實(shí)現(xiàn)了。

為了方便我們給NavigationManager直接寫個(gè)擴(kuò)展方法吧。
首先修改Program把IServiceCollection暴露出來：

public class Program{public static IServiceCollection Services;public static async Task Main(string[] args){var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("app");builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });Services = builder.Services;await builder.Build().RunAsync();}}

擴(kuò)展類：

public static class Ext{public static void Back(this NavigationManager navigation){var jsruntime = Program.Services.BuildServiceProvider().GetService<IJSRuntime>();jsruntime.InvokeVoidAsync("history.back");}}

這個(gè)擴(kuò)展方法很簡(jiǎn)單，從DI容器里獲取IJSRuntime的實(shí)例對(duì)象，通過它去調(diào)用JavaScript的history.back方法。

修改Page B：

@page "/page/b" <h2>PAGE B </h2> <p>userName: @UserName </p> <p><button @onclick="GoBack">Go back</button> </p> @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();}private void GoBack(){NavigationManager.Back();} }

在Page B頁(yè)面上添加一個(gè)按鈕，點(diǎn)擊調(diào)用NavigationManager.Back方法就能回到上一頁(yè)。

總結(jié)

到此Blazor路由的內(nèi)容學(xué)習(xí)的差不多了，整體上沒有什么特別的，就是NavigationManager只有前進(jìn)方法沒有后退是比較讓我震驚的。

相關(guān)內(nèi)容：

ASP.NET Core Blazor Webassembly 之 數(shù)據(jù)綁定
ASP.NET Core Blazor Webassembly 之 組件
ASP.NET Core Blazor 初探之 Blazor WebAssembly
ASP.NET Core Blazor 初探之 Blazor Server

關(guān)注我的公眾號(hào)一起玩轉(zhuǎn)技術(shù)

總結(jié)

以上是生活随笔為你收集整理的ASP.NET Core Blazor Webassembly 之 路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。