Blazor - 导航到不同的页面答案

【问题标题】：Blazor - Navigating to a different pageBlazor - 导航到不同的页面
【发布时间】：2021-02-27 17:41:28
【问题描述】：

我想了解一些关于 Blazor 的知识，所以我正在使用 Blazor 最小项目模板 (https://marketplace.visualstudio.com/items?itemName=GregTrevellick.BlazorMinimalProjectTemplate) 制作一个简单的网站。

我创建了一个 Pages 文件夹，其中有 About.razor 和 Index.razor

在 About.razor 我只有：

@page "/about"

<h3>About</h3>

我希望能够从索引页面转到关于页面。我正在尝试通过 Index.razor 中的简单链接来实现这一点：

<a href="About">About</a>

不幸的是，这只会将 URL 从 localhost:1111 更改为 localhost:1111/About 但页面没有改变（它仍然是索引页面）。

即使我写了 URL (/about)，我仍然在索引页面上。

使用 Blazor 导航到不同页面的最佳方式是什么？

【问题讨论】：

MyApp.razor 有一个DefaultLayout="@typeof(Index)" 尝试将其更改为DefaultLayout="@typeof(Layout) 并在名为Shared 的文件夹中为您的页面创建布局。只要你有@Body，空布局就可以了。

标签： blazor blazor-client-side

【解决方案1】：

您选择的模板看起来非常小！

HMZ 的想法是正确的。供您参考，我试过了，它对我有用。

Layout.razor（存储在共享文件夹中的新文件）

@inherits LayoutComponentBase

<div class="page">
    <div class="main">
        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

MyApp.razor

@using Microsoft.AspNetCore.Components.Routing
@using BlazorMinimal1.Shared

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

IMO，如果您想了解 Blazor，最好使用 Visual Studio 中提供的标准模板。

【讨论】：