ASP.NET Core Blazor 系列 - 018 路由與導向(2) 導航 Navigation - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 18

Modern Web

我與 Blazor 的 30 天系列第 18 篇

ASP.NET Core Blazor 系列 - 018 路由與導向(2) 導航 Navigation

14th鐵人賽

Jim Wang

2022-10-02 18:29:53

1487 瀏覽

分享至

前言

本篇文章同步發表於個人部落格 Jim's Blog

完成路由的設定後，下一步就是切換到不同路由的方法，今天介紹怎麼使用 NavigationManager 來做路由的切換

NavigationManager

這是用來提供查詢和瀏覽 Uri 的工具，介紹幾個比較重要的事件和方法

屬性 Uri

這個屬性顧名思義就是取得目前的 Uri

屬性 BaseUri

取得基底的 Uri，這邊會對應到上一篇所提到的在 <head> 標籤內的 base 屬性

事件 LocationChanged

這個事件如其名，當路由改變時所引發，在其中的 LocationChangedEventArgs 會提供相關的資訊

方法 ToAbsoluteUri

會將相對 URI 轉換成絕對 URI

方法 GetUriWithQueryParameter

可以將提供的 URI 插入 QueryString 的方法，用法會像這樣

@inject NavigationManager NavigationManager

NavigationManager.GetUriWithQueryParameters("{URI}", {Parameter})

{Parameter} 是 IReadOnlyDictionary<string, object>

方法 NavigateTo

用來導向要去的 URI，這邊有兩個要特別提的參數，我們看一下微軟的方法定義

public void NavigateTo (string uri, bool forceLoad = false, bool replace = false);

forceLoad
這個參數如果為 true 在導向時會做整個頁面的重新載入
replace
這個參數為 true 在導向時，會用取代的方式去重載路由，例如說從 A頁面 導向至 B頁面，在B頁面點選上一頁並不會回到 A頁面 而是 A頁面的上一頁

Navigating 互動

如果轉換頁面時需要顯示資訊給使用者，讓使用者了解正在轉換頁面可以用這個方法來達成

@using Microsoft.AspNetCore.Components.Routing

在 App.razor 中

<Navigating>
    <p>頁面載入中</p>
</Navigating>

NavLink 元件

如果不想要用程式的方式去做導向，可以使用微軟提供的元件 <NavLink>，會轉譯 HTML的 <a> 元素

小結

在掌握了身分驗證、路由(Routing)和導向(Navigation)，已經可以完成一個基本的會員功能開發，例如登入前與登入後可以進入或者顯示的頁面不同、存取需要登入的頁面將使用者重新引導至登入頁面以及實作身分別等等功能，如果有時間我會在後續的文章中實作，下一篇預計是介紹 Blazor 的相依性注入