MAUI Blazor Hybrid中如何获取并导航至上一页？

针对你遇到的布局页中返回按钮需要回到上一页的需求，提供两种可行方案：

方案一：通过JavaScript调用浏览器历史后退 #

MAUI Blazor的WebView环境支持JS互操作，直接调用浏览器的history.back()即可实现返回上一页，这是最简单的方案。

在你的布局页（如MainLayout.razor）中添加以下代码：

@inject IJSRuntime JSRuntime
@inject NavigationManager NavManager

<!-- 你的返回按钮 -->
<button @onclick="GoBack" class="back-btn">返回</button>

@code {
    private async Task GoBack()
    {
        try
        {
            // 调用浏览器历史后退
            await JSRuntime.InvokeVoidAsync("history.back");
        }
        catch
        {
            // 当没有历史记录时（比如直接进入当前页面），跳转到默认首页
            NavManager.NavigateTo("/");
        }
    }
}

优点： #

• 无需手动维护历史栈，直接复用浏览器的导航历史
• 代码简洁，适配所有支持JS的WebView平台

注意： #

• 该方案依赖WebView的JS运行环境，MAUI Blazor默认支持，无需额外配置
• 若用户手动刷新页面，浏览器历史会保留，依然能正常返回

方案二：自定义维护导航历史栈 #

如果不想依赖JS，可以通过NavigationManager的LocationChanged事件手动记录导航历史，实现返回逻辑。

布局页代码示例：

@inject NavigationManager NavManager
@implements IDisposable

<button @onclick="GoBack" class="back-btn">返回</button>

@code {
    private readonly List<string> _navigationHistory = new List<string>();
    private string _currentUri;

    protected override void OnInitialized()
    {
        _currentUri = NavManager.Uri;
        // 订阅导航变化事件，记录历史
        NavManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        // 避免重复记录相同URL（如页面刷新）
        if (_currentUri != e.Location)
        {
            _navigationHistory.Add(_currentUri);
            _currentUri = e.Location;
        }
    }

    private void GoBack()
    {
        if (_navigationHistory.Count > 0)
        {
            var lastUri = _navigationHistory.Last();
            _navigationHistory.RemoveAt(_navigationHistory.Count - 1);
            NavManager.NavigateTo(lastUri);
        }
        else
        {
            // 无历史记录时跳转到首页
            NavManager.NavigateTo("/");
        }
    }

    // 销毁时取消事件订阅，避免内存泄漏
    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

优点： #

• 完全在Blazor层面实现，不依赖JS
• 可自定义历史栈的维护逻辑（比如过滤某些URL）

缺点： #

• 页面刷新后，自定义的历史栈会丢失（因为Blazor SPA状态重置）
• 需要处理边界情况（如重复导航、手动输入URL等）

内容的提问来源于stack exchange，提问作者Sam