如何在Blazor中使用JavaScript实现无刷新页面跳转？

核心结论 #

可以通过JavaScript实现Blazor的无刷新页面跳转，但不能直接使用pushState——它只会修改URL和浏览器历史栈，不会触发Blazor路由系统的视图更新。要模拟NavigationManager的功能，需要让JavaScript调用Blazor官方的导航API。

解决方案：JS调用Blazor的NavigationManager #

最可靠的方式是通过JS与Blazor的互操作，直接调用NavigationManager.NavigateTo方法，该方法会自动处理路由匹配、视图更新和URL修改，且不会刷新页面。

方法1：通过组件实例实现 #

1. 在Blazor组件中注入NavigationManager和IJSRuntime，并定义可被JS调用的导航方法：

@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

<!-- 示例按钮，调用JS方法 -->
<button onclick="navigateTo('/blazor_app/view1')">跳转到View1</button>

@code {
    [JSInvokable]
    public void NavigateTo(string uri)
    {
        NavManager.NavigateTo(uri);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 将组件实例传递给JS
            await JSRuntime.InvokeVoidAsync("registerNavigationComponent", DotNetObjectReference.Create(this));
        }
    }
}

2. 编写对应的JavaScript代码：

let blazorNavComponent;

function registerNavigationComponent(componentRef) {
    blazorNavComponent = componentRef;
}

// 对外暴露的导航方法
function navigateTo(uri) {
    blazorNavComponent.invokeMethodAsync('NavigateTo', uri);
}

方法2：全局导航服务（更灵活） #

如果需要在多个JS场景中调用导航，可以创建全局服务：

1. 创建导航服务类：

public class BlazorGlobalNavService
{
    private readonly NavigationManager _navManager;

    public BlazorGlobalNavService(NavigationManager navManager)
    {
        _navManager = navManager;
    }

    [JSInvokable]
    public void NavigateTo(string uri)
    {
        _navManager.NavigateTo(uri);
    }
}

2. 在Program.cs中注册服务：

builder.Services.AddSingleton<BlazorGlobalNavService>();

3. 在App.razor中注册服务到JS：

@inject BlazorGlobalNavService GlobalNavService
@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("registerGlobalNavService", DotNetObjectReference.Create(GlobalNavService));
        }
    }
}

4. JS代码：

let globalNavService;

function registerGlobalNavService(serviceRef) {
    globalNavService = serviceRef;
}

// 全局可用的导航方法
window.blazorNavigate = (uri) => {
    globalNavService.invokeMethodAsync('NavigateTo', uri);
};

为什么pushState无效？ #

history.pushState仅修改浏览器的URL和历史记录，不会触发popstate事件（该事件仅在用户点击浏览器前进/后退按钮时触发）。Blazor的路由系统依赖自身的导航方法或监听popstate事件来更新视图，因此直接调用pushState无法让Blazor感知到URL变化，自然不会更新视图。

内容的提问来源于stack exchange，提问作者Mayank Singh Rawat