介紹完路由魔術後，是不是覺得手打網址來測試很麻煩，所以今天先來介紹導覽元件。

題外話：本系列文的魔術材料版本並不支援萬用路由，但將會在之後的更新支援(add Blazor catch-all route parameter)。

而解決手打問題只要在任一頁面加上超連結元素 a 即可：

@* Index.razor *@
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<a href="custompage">前往自訂頁面</a>

<SurveyPrompt Title="How is Blazor working for you?" />

這樣就可以在首頁看到"前往自訂頁面"的超連結元素，是不是很簡單呀？

但即便是第一次接觸網頁開發的人也會覺得怪怪的，因為新畫面可能不隸屬於首頁，而是獨立出來的功能，那麼放到側欄選單才是比較合理的方式，也就是增加導覽列內容。

在專案範本建立時，Blazor 就會送你一個導覽列元件(NavMenu.razor)，是不是很佛心啊！

而要使導覽列增加元素，只需要簡單的複製貼上就好：

<li class="nav-item px-3">
    <NavLink class="nav-link" href="custompage">
        <span class="oi oi-thumb-up" aria-hidden="true"></span> CustomPage
    </NavLink>
</li>

是不是很容易上手呢！而這邊排除 HTML 與 CSS 外唯一的問題是，NavLink 是什麼？

NavLink 元件

NavLink 元件與 HTML 元素 a 相似，但能提供根據其 href 的內容來判斷是否添加 active 樣式類別，當然也可以選擇該添加的樣式類別，非常好用也請在開發 Blazor 時，使用 NavLink 元件來取代超連結元素 a。

這邊介紹一下 NavLink 元件主要的兩個屬性：

• Match 判斷是否處於 active 的標準，有兩種判斷方式：
  • NavLinkMatch.All 整個 URL 都必須與 href 的值符合。
  • NavLinkMatch.Prefix 只要任何一個 URL 前置詞與 href 的值符合。

• ActiveClass 用於設定或取得當 NavLink 判斷為 active 時，添加的 CSS 類別。

若是需要藉由其他來源自動產生導覽列內容，建議使用 @foreach 迴圈來產生。

以上就是 Blazor WebAssembly 針對導覽列的設定與修改啦。

感謝大家的閱讀，我們明天見。

參考連結
NavLink 元件