本篇文章同步發表於 個人部落格 Jim's Blog
完成路由的設定後,下一步就是切換到不同路由的方法,今天介紹怎麼使用 NavigationManager
來做路由的切換
這是用來提供查詢和瀏覽 Uri 的工具,介紹幾個比較重要的事件和方法
這個屬性顧名思義就是取得目前的 Uri
取得基底的 Uri,這邊會對應到上一篇所提到的在 <head>
標籤內的 base
屬性
這個事件如其名,當路由改變時所引發,在其中的 LocationChangedEventArgs
會提供相關的資訊
會將相對 URI 轉換成絕對 URI
可以將提供的 URI 插入 QueryString 的方法,用法會像這樣
@inject NavigationManager NavigationManager
NavigationManager.GetUriWithQueryParameters("{URI}", {Parameter})
{Parameter} 是 IReadOnlyDictionary<string, object>
用來導向要去的 URI,這邊有兩個要特別提的參數,我們看一下微軟的方法定義
public void NavigateTo (string uri, bool forceLoad = false, bool replace = false);
true
在導向時會做整個頁面的重新載入true
在導向時,會用取代的方式去重載路由,例如說從 A頁面
導向至 B頁面
,在B頁面
點選上一頁並不會回到 A頁面
而是 A頁面的上一頁
如果轉換頁面時需要顯示資訊給使用者,讓使用者了解正在轉換頁面可以用這個方法來達成
@using Microsoft.AspNetCore.Components.Routing
在 App.razor
中
<Navigating>
<p>頁面載入中</p>
</Navigating>
如果不想要用程式的方式去做導向,可以使用微軟提供的元件 <NavLink>
,會轉譯 HTML的 <a>
元素
在掌握了身分驗證
、路由(Routing)
和導向(Navigation)
,已經可以完成一個基本的會員功能開發,例如登入前與登入後可以進入或者顯示的頁面不同、存取需要登入的頁面將使用者重新引導至登入頁面以及實作身分別等等功能,如果有時間我會在後續的文章中實作,下一篇預計是介紹 Blazor 的相依性注入