布局
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源创计划”，欢迎正在阅读的你也加入，一块儿分享。