Blazor —— 母版页的定义和使用（Layout）

定义和使用

首先，让组件继承 LayoutComponentBase 然后在需要作为子页面呈现的位置输出 Body 属性，然后子页面可以使用 @layout 指令要使用的指定母版页，完事儿。

定义模板页叫 MyLayout：

@inherits LayoutComponentBase

<div class="main">
  <header>
    <h1>顶部内容</h1>
  </header>
  <div class="content">
    @Body
  </div>
  <footer>
    底部内容
  </footer>

子页面：

@page "/mypage"
@layout MyLayout

<h1>我是子页面</h1>

但是页面多了，每次都要指定就很麻烦了，所以我们需要使用全局配置。

全局指定母版页

在你的 App.razor 中：

<Router AppAssembly="typeof(Program).Assembly">
	<Found Context="routeData">
		<RouteView RouteData="routeData" DetaultLayout="typeof(MyLayout)" />
	</Found>
</Router>

配置组件 RouteView 中的 DefaultLayout 即可。它接受一个 Type 类型，所以直接使用 typeof(类) 的方式就行了。

总结

总结啥呢？母版页会使用了吧…呵呵哒 ^ _ ^