Blazor 中的另一个页面未从头开始

Question

我的 Blazor 遇到问题，可能是路由问题。我正在使用 MudBlazor 组件，我可以看到一个奇怪的行为。我有导航菜单（MudNavMenu），当我选择转到另一个页面时，它成功地重定向了我，但它没有重定向到页面的开头 - 它重定向到与最后一页相同的时刻。 例如：您一直向下滚动，Yoy位于页面末尾，然后您选择转到另一个页面，并且该页面在末尾加载，而不是在开头加载。 我不知道为什么会这样（当然我希望在开始时加载一个新页面）。我尝试使用普通的 href、MudBlazor Href、带有 Id (#) 的 hrefs/Hrefs、带有 NavigateTo 方法的代码隐藏导航管理器。每个解决方案的行为都是相同的。

MainLayout.razor：

<MudLayout>
    <MudAppBar Style="background-color: #FFFFFF">
        <MudImage Width=200 Src="images/svg/logo-blue.svg"></MudImage>
        <p class="title-text">Some Title</p>
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Info" Edge="Edge.End" OnClick="@((e) => DrawerToggle())" />
    </MudAppBar>
    <MudDrawer @bind-Open="@_drawerOpen" Anchor="Anchor.Right">
        <NavMenuMud />
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.Medium" Class="pt-5">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = false;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }

NavMenuMud.razor

<MudNavMenu Bordered="true" Rounded="true" Margin="Margin.Dense" Color="Color.Info" Class="pa-2">
    <MudText Typo="Typo.h6" Class="px-4">Navigation</MudText>
    <MudText Typo="Typo.caption" Class="px-4 mud-text-secondary">Click to navigate</MudText>
    <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Rounded.Home">Main page</MudNavLink>
    <MudNavLink Href="/Example1" Match="NavLinkMatch.Prefix" Icon="@Icons.Rounded.Info">Example1</MudNavLink>
    <MudNavGroup Title="List" Icon="@Icons.Rounded.ListAlt">
        <MudNavLink Href="/Example2">Example2</MudNavLink>
        <MudNavLink Href="/Example3">Example3</MudNavLink>
        <MudNavGroup Title="Examples">
            <MudNavLink Href="/Examples/Example4">Example4</MudNavLink>
        </MudNavGroup>
    </MudNavGroup>
</MudNavMenu>

除了这些之外，我还有一些带有内容的剃刀组件（一些 MudTexts、MudPapers 等，没有什么问题）。

Answer 1

我也面临着类似的问题。对这个问题的解决方案的长期搜索导致我在这里进行了更改，我在这里没有找到答案，我开始挖掘重定向到 blazor wasm 的指南。

我注意到我没有仔细阅读指南，一般来说，App.razor 文件包含以下标准代码：

 <Found Context="routeData">
    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    <FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>

从整个代码来看，很明显，当切换到另一个页面时，优先级是

<h1>

标签。

只需在页面添加

<h1>

标签，当您进入此页面时，您将被重定向到此标签

Answer 2

今天组件 'FocusOnNavigate RouteData="@routeData" Selector="h1"' 不起作用。

参见：

FocusOnNavigate 不会滚动到选择器

https://github.com/dotnet/aspnetcore/issues/52412