Blazor

Question

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

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

在About.razor我只有：

@page "/about"

<h3>About</h3>

我希望能够从索引页面转到关于页面。我正在尝试通过 Index.razor:

中的简单 link 来实现这一点

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

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

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

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

Answer 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 中提供的标准模板。

Blazor - 导航到不同的页面

Blazor - Navigating to a different page

blazor-client-side