佈局
Blazor中的佈局和MVC中的佈局是相似的。web
建立佈局
新建一個Razor頁面，全部新增的佈局都要繼承LayoutComponentBase，同時標識自定義內容的輸出位置，即標識Body的位置。如圖所示：
瀏覽器
應用佈局
咱們修改一下index.razor頁面中的代碼，增長@layout MyLayout。運行後，按F12查看網頁源代碼以下：佈局的內容被<app></app>標籤包着，這也意味着，咱們的layout並非頁面的所有內容，而僅僅只是blazor相關的內容。
順便說一下，佈局是能夠「繼承」的，也就是說，咱們能夠聲明一個新的佈局繼承自MainLayout.razor ，只須要指定以下代碼便可：微信
@inherits LayoutComponentBase
@layout MainLayout
路由
路由定義
路由模板
定義在App.razor中：app
<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」。固然一個頁面能夠定義多個路由。以下：ide
-
@page 「/index」 -
@page 「/」 -
@page 「/home/index」
定義與約束路由參數
這個其實和ASP.NET Core API的路由方式沒有太大區別，包括路由約束部分。佈局
@page "/Index/{Theme}"
接收參數的方式也很簡單，須要聲明一個get;set的屬性，而且必須是public的，同時須要用Parameter特性去標識。flex
@{
[Parameter]
public string Theme{get;set;}
}
如下是路由約束，相比於MVC，這些約束也沒什麼變化。this
咱們先看一個例子
<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有兩個枚舉：spa
-
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;
}
本文分享自微信公衆號 - dotNET跨平臺（opendotnet）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。