Study Blazor .NET（八）页面布局

翻译自：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>