布局

Blazor中的布局和MVC中的布局是類似的。

創建布局

新建一個Razor頁面，所有新增的布局都要繼承LayoutComponentBase，同時標識自定義內容的輸出位置，即標識Body的位置。如圖所示：

應用布局

我們修改一下index.razor頁面中的代碼，增加@layout MyLayout。運行后，按F12查看網頁源代碼如下：布局的內容被<app></app>標簽包著，這也意味著，我們的layout并不是頁面的全部內容，而僅僅只是blazor相關的內容。
順便說一下，布局是可以“繼承”的，也就是說，我們可以聲明一個新的布局繼承自MainLayout.razor ，只需要指定如下代碼即可：

@inherits?LayoutComponentBase @layout?MainLayout

路由

路由定義

路由模板

定義在App.razor中：

<Router?AppAssembly="@typeof(Program).Assembly"><Found?Context="routeData"><RouteView?RouteData="@routeData"?DefaultLayout="@typeof(MainLayout)"?/></Found><NotFound><LayoutView?Layout="@typeof(MainLayout)"><p>Sorry,?there's?nothing?at?this?address.</p></LayoutView></NotFound> </Router>

里面有三個重要組件：

• Found：路由機制渲染存在的頁面

• RouteView：接收路由數據和默認的布局

• NotFound：路由機制渲染不存在的頁面，當然我們可以自己定義404內容

定義路由

路由定義很簡單，只需要前綴@page，然后定義你的路由名稱即可，如@page “index”。當然一個頁面可以定義多個路由。如下：

• @page “/index”

• @page “/”

• @page “/home/index”

定義與約束路由參數

這個其實和ASP.NET Core API的路由方式沒有太大區別，包括路由約束部分。

@page?"/Index/{Theme}"

接收參數的方式也很簡單，需要聲明一個get;set的屬性，并且必須是public的，同時需要用Parameter特性去標識。

@{[Parameter]public?string?Theme{get;set;} }

以下是路由約束，相比于MVC，這些約束也沒什么變化。

我們先看一個例子

<div?class="@NavMenuCssClass"?@onclick="@ToggleNavMenu"><ul?class="nav?flex-column"><li?class="nav-item?px-3"><NavLink?class="nav-link"?href=""?Match="NavLinkMatch.All"><span class="oi?oi-home"?aria-hidden="true"></span>?Home</NavLink></li><li?class="nav-item?px-3"><NavLink?class="nav-link"?href="MyComponent"?Match="NavLinkMatch.Prefix"><span class="oi?oi-plus"?aria-hidden="true"></span>?My?Component</NavLink></li></ul> </div>?

NavLinkMatch有兩個枚舉：

• NavLinkMatch.All：當匹配整個URL時，可以路由到頁面

• NavLinkMatch.Prefix：這是默認使用的，當匹配到當前URL的前綴時，可以路由到頁面。如https://localhost:5001/MyComponent和 https://localhost:5001/MyComponent/AnotherSegment 接下來我們看一下如果通過代碼方式進行頁面跳轉，那就是可以使用NavigationManager進行頁面跳轉，其實例是通過注入獲取的。

@inject?NavigationManager?NavigationManager

成員描述

Uri	獲取當前的絕對URL
BaseUri	獲取根URI（末尾帶斜杠），然后以此追加相對路徑進而組合成絕對URI
NavigateTo	導航到指定的 URI（前提是設置forceLoad 為true），使用此方式，會繞過客戶端路由，使得瀏覽器會強制刷新頁面，如：UriHelper.NavigateTo("/DataList/" + Index, forceLoad);
LocationChanged	當導航位置更改時觸發的事件
ToAbsoluteUri	將相對 URI 轉換為絕對 URI
ToBaseRelativePath	給定一個根 URI（例如，以前由BaseUri返回的 URI），將絕對 URI 轉換為帶有根URI 前綴的相對 URI

其他

Blazor雖然提供了十分豐富而又靈活的路由功能，但目前還沒有一個明確的功能讓我們使用可選參數，但是我們可以變通一下，就是設置接收的數據類型為可空類型。代碼如下:

@page?“DataList/{Index:int}” [Parameter] public?int??Index?{?get;?set;?} protected?override?void?OnInitialized() {base.OnInitialized();Index?=?Index???1; }

• Blazor帶我重玩前端(一)
  

• Blazor帶我重玩前端(二)
  

• Blazor帶我重玩前端(三)
  

總結

以上是生活随笔為你收集整理的Blazor带我重玩前端(四)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。