###### tags: `MAUI + Blazor`
# MAUI + Blazor (.Net6.0) 快速新增一個頁面
[Blazor 官方說明]("https://learn.microsoft.com/zh-tw/aspnet/core/blazor/?view=aspnetcore-7.0")
[Razor 官方說明]("https://learn.microsoft.com/zh-tw/aspnet/core/tutorials/razor-pages/?view=aspnetcore-7.0")

跑起來之後, 就可以看到專案預設的首頁畫面 如上圖

標示1 的區塊為可以展開的區塊 也就是導航區
要修改導航 增加頁面就要到NavMenu.razor這個地方修改
標示2 的區塊就是首頁區塊 他對應到Index.razor 這個地方

## 新建一個頁面
所有的畫面都放到Pages這個資料夾底下

我們新增一個頁面(Razor元件)叫做About

創建出來的畫面如上圖

在最上面加上@page "/叫什麼都可以"
這樣這個畫面就能被找到

現在我們回到NavMenu.razor把這個新的頁面加上
原始碼如下
`<div class="nav-item px-3">
<NavLink class="nav-link" href="about">
<span class="oi oi-list-rich" aria-hidden="true"></span> About
</NavLink>
</div>`

執行模擬器之後點開導航區塊, 就會發現多了一個About連結

點擊之後就會進到我們剛創好的畫面

## 做按鈕去切換畫面

首先要先把NavigationManager給注入進來
然後再寫一個按鈕的控制項, 聲明一個點擊事件
事件的方法寫在@code裡面
方法內可以傳入參數
在NavigateTo裡面寫入要切換的畫面
點擊之後就會切換過去

## 修改首頁
如果想要把首頁換成自己新增的頁面
只要把index.razor 移除或是頁面路徑改掉, 把新作好的頁面路徑改成 @page "/" 即可
如果有兩個頁面有相同的首頁路徑, 模擬器執行中會出現錯誤