翻译自:Study Blazor .NET,转载请注明。
页面布局
在模板代码中,使用 bootstrap CSS 页面布局,在 NavMenu 组件中路由指向的 MainLayout 组件里,相应的组件在 @Body
div元素中渲染。
Navlink
是blazor内置组件,它使用 href 特性提供组件列表的路由。
//MainLayout.razor
@inherits LayoutComponentBase
<div>
<NavMenu />
</div>
<div >
@Body
</div>
///NavMenu.razor
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
Home
</NavLink>
<NavLink class="nav-link" href="counter">
Counter
</NavLink>
<NavLink class="nav-link" href="fetchdata">
Fetch data
</NavLink>