Blazor Server路由变更前调用SetHistoryItem()的解决方案求助

你当前使用LocationChanged事件和Dispose方法的问题在于，它们都是在路由完成变更后才触发，无法在导航前将状态存入浏览器历史，导致返回时无法获取stateObj。针对.NET Core 3.1的Blazor Server，可通过以下两种方案实现导航前置操作：

方案一：封装导航服务统一拦截 #

创建自定义导航服务，包装NavigationManager的导航逻辑，确保存储状态的操作先于导航执行：

public class CustomNavigationService
{
    private readonly NavigationManager _navigationManager;
    private readonly IJSRuntime _jsRuntime;

    public CustomNavigationService(NavigationManager navigationManager, IJSRuntime jsRuntime)
    {
        _navigationManager = navigationManager;
        _jsRuntime = jsRuntime;
    }

    public async Task NavigateToWithState(string uri, object stateObj, bool forceLoad = false)
    {
        // 先调用JS互操作存储状态
        await _jsRuntime.InvokeVoidAsync("setStateObject", stateObj);
        // 执行页面导航
        _navigationManager.NavigateTo(uri, forceLoad);
    }
}

在Startup.cs的ConfigureServices中注册该服务：

services.AddScoped<CustomNavigationService>();

在组件中注入并使用这个服务代替原生NavigationManager：

@inject CustomNavigationService CustomNav
@inject YourStateHolder StateHolder // 替换为你存储状态的服务/对象

<button @onclick="NavigateToTarget">跳转至目标页</button>

@code {
    private async Task NavigateToTarget()
    {
        var stateObj = StateHolder.GetCurrentState(); // 获取需要存储的状态
        await CustomNav.NavigateToWithState("/target-page", stateObj);
    }
}

方案二：拦截组件内的导航触发动作 #

如果使用<NavLink>或自定义导航链接，可通过阻止默认行为，先执行状态存储再手动导航：

<NavLink href="/target-page" @onclick:preventDefault="true" @onclick="HandleNavClick">
    目标页
</NavLink>

@code {
    @inject NavigationManager NavManager
    @inject IJSRuntime JSRuntime

    private async Task HandleNavClick()
    {
        var stateObj = // 替换为你的状态对象
        await JSRuntime.InvokeVoidAsync("setStateObject", stateObj);
        NavManager.NavigateTo("/target-page");
    }
}

注意事项 #

• 仅在主动导航（用户点击链接、代码触发导航）时需要前置存储状态；浏览器前进/后退触发的导航属于历史状态读取场景，无需处理。
• .NET Core 3.1没有内置的路由变更前拦截事件，上述方案均通过主动控制导航时机实现前置操作。若后续升级到.NET 6+，可使用NavigationManager.RegisterLocationChangingHandler实现更通用的拦截逻辑。

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