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(類) 的方式就行了。

總結

總結啥呢？母版頁會使用了吧…呵呵噠 ^ _ ^