如何在Blazor中嵌套布局和路由？
如何在Blazor中嵌套布局和路由？
提问于 2022-01-05 10:49:59
我使用下面的文件夹结构来组织我的blazor wasm项目：
Features
- Components
- Feature A
- Components
- Page1.razor
- Page2.razor
Index.razor
Shared
- MainLayout.razor我已经创建了一个布局，我想在大多数功能中使用它。
我想出了以下的想法，但我正在努力实现这一点。SubPageLayout.razor：
@inherits LayoutComponentBase
@layout MainLayout
<div>
<span>@FeatureTitle</span>
@Menu
<div class="container">
<span>@PageTitle</span>
<div class="content">
@Body
</div>
</div>
</div>然后，我将创建一个使用布局的特性A/Index.剃刀页面：
@page "/feature"
@layout SubPageLayout
<FeatureTitle>Feature A</FeatureTitle>
<Menu>
...
</Menu>
@Body然后在第1页，剃刀：
@page "/feature/page-1"
<PageTitle>Page 1</PageTitle>
Content...我有两个相关的问题：
- 实现这个嵌套布局的方式是什么？
- 如何将本地主机/特性重定向到localhost /feature /page? /feature本身只是一个包装器，为该特性的所有页面提供了通用的布局和导航。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-05 16:40:01
巴兹尔溶液
首先，我创建了一个作为布局的组件。Features/Components/SubPageLayout.razor
<div class="container">
<div class="sidebar">
<span>@Title</span>
@Menu
</div>
@PageContent
</div>
@code
{
[Parameter]
public string Title { get; set; } = String.Empty;
[Parameter]
public RenderFragment? Menu { get; set; }
[Parameter]
public RenderFragment? PageContent { get; set; }
}现在我可以使用这个组件来创建一个布局。例如Features/FeatureA/Components/FeatureALayout.razor
@inherits LayoutComponentBase
@layout MainLayout
<SubPageLayout Title="FeatureA">
<Menu>
<ul>...</ul>
</Menu>
<PageContent>
@Body
</PageContent>
</SubPageLayout>在Features/FeatureA/_Imports.cs中，将布局应用于该功能的所有页面：
@layout Components.FeatureALayout要从/feature重定向到/feature/page-1，请实现/Features/FeatureA/Index.razor
@page "/feature-a"
@inject NavigationManager NavManager
@code {
protected override void OnInitialized()
{
NavManager.NavigateTo("/feature-a/page-1");
}
}所有帮助我的资源：
- https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0#nested-layouts
- 模板从页面或组件到布局的blazor RenderFragment
- https://github.com/dotnet/aspnetcore/issues/16009#
- https://blazor-university.com/layouts/nested-layouts/
- https://chrissainty.com/blazor-bites-layouts/
- https://github.com/dotnet/aspnetcore/issues/16009#issuecomment-390932846
- https://github.com/dotnet/aspnetcore/issues/11671
使用BlazorRouter的解决方案(如react路由器)
在你的MainLayout：
<nav>
<NavLink Href="/feature-a">Feature-A</MudNavLink>
</nav>
<main>
<Switch>
<Route Template="feature-a/*">
<BlazorUI.Features.FeatureA.Index />
</Route>
<Route>
<p>404</p>
</Route>
</Switch>
</main>在Features/FeatureA/Index.razor中
@page "/feature-a"
@inherits LayoutComponentBase
@layout MainLayout
@inject NavigationManager NavManager
@code {
protected override void OnInitialized()
{
NavManager.NavigateTo("/feature-a/page-1");
}
}
<div class="sub-layout">
<ul>...</ul>
<div class="content">
<Switch>
<Route Template="feature-a/page-1">
<Page1/>
</Route>
<Route>
<p>No content found in nested layout</p>
</Route>
</Switch>
</div>
</div>索引页包含嵌套布局。开关将根据当前的url加载页面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70591623
复制相关文章
相似问题
腾讯云开发者
