Blazor使用布局

指定应用程序的默认布局

指定布局的最通用方法是编辑**/Pages/_Imports.razor**文件，然后编辑单行代码以标识其他布局。

@layout MainLayout

布局的名称是强类型的。 Blazor仅在存在具有指定名称的布局的情况下才正确语法突出显示代码，如果标识符不正确，则编译器也会失败。

注意：显然，如果您只想更改现有布局的外观，则可以更改**/Shared/MainLayout.razor**文件。

为应用程序区域指定默认模板

如果您的应用程序具有单独的区域，例如“管理员”区域，则可以通过将其分组在自己的子文件夹（具有_Imports.razor）中来指定默认布局，以用于该区域中的所有页面。文件。

创建一个新的Blazor客户端应用，然后更新导航菜单以包含指向我们即将创建的新页面的链接。

1. 打开/Shared/NavMenu.razor文件。
2. 找到最后一个 <li> 元素，它应包含一个<NavLink>元素。
3. 复制<li>元素。
4. 将NavLink的href属性更改为“admin/users”。
5. 将链接的文本更改为Admin users。

接下来，我们将创建一个非常基本的页面

1. 在解决方案资源管理器中展开**/ Pages**节点。
2. 创建一个名为Admin的文件夹。
3. 在名为AdminUsers.razor的文件夹中创建一个新文件。

    @page "/admin/users"
    <h2>Users</h2

注意：页面的URL不必反映文件夹结构。

现在运行该应用程序将为您提供一个具有名为“Admin users”的新菜单项的应用程序。当您单击该项目时，它将显示一个非常基本的页面，上面仅显示“用户”。接下来，我们将为所有管理页面创建默认布局。

1. 在名为_Imports.razor的Admin文件夹中创建另一个新文件。
2. 输入以下代码。

@layout AdminLayout

此时，应用程序中没有名为AdminLayout的文件，因此您应该在Visual Studio中看到一个红线，名称下方表示找不到该文件。您可以通过在Shared文件夹中创建AdminLayout.razor来解决此问题。

    @inherits LayoutComponentBase
    <h1>Admin</h1>
    @Body

如果现在运行该应用程序并单击“管理员用户”链接，您将看到仅由<h1>和<h2>组成的糟糕的用户体验。我们将在“嵌套布局”部分中解决此问题，但现在，我们将使用它作为如何从页面本身显式指定布局的练习。

为单个页面明确指定布局

到目前为止，我们已经看到可以在/Pages/_Imports.razor文件中指定默认布局。我们还发现，可以通过Blazor在靠近要呈现的页面的位置找到更具体的_Imports.razor文件来覆盖此设置。指定要使用的模板的最终（最明确）级别是使用@layout指令在页面本身中按字面指定它。

    @page "/admin/users"
    @layout MainLayout
    <h2>Users</h2>

现在，再次运行该应用程序并单击“Admin users”链接，将使用该应用程序的标准布局显示基本页面。