如何配置Blazor WASM同主机非Blazor路径的导航规则？

Blazor SPA默认会拦截客户端所有路由请求，导致MVC控制器处理的路径返回404。以下是几种实现全局规则、让指定路径跳转到MVC页面的方案：

方案1：自定义导航服务（推荐） #

封装导航逻辑，自动判断路径是否需要跳转到外部MVC页面：

1. 创建NavigationService.cs：

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

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

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

    public async Task NavigateTo(string uri, bool forceLoad = false)
    {
        // 判断是否为MVC专属路径，这里以/admin/前缀为例
        if (uri.StartsWith("/admin/", StringComparison.OrdinalIgnoreCase))
        {
            // 通过JS触发浏览器完整跳转，绕过Blazor路由拦截
            await _jsRuntime.InvokeVoidAsync("window.location.href", uri);
        }
        else
        {
            // 正常使用Blazor内部导航
            _navigationManager.NavigateTo(uri, forceLoad);
        }
    }
}

2. 在Program.cs注册服务：

builder.Services.AddScoped<NavigationService>();

3. 在Blazor组件中注入使用：

@inject NavigationService NavigationService

<button @onclick="() => NavigationService.NavigateTo("/admin/dashboard")">跳转到MVC后台</button>

方案2：扩展NavigationManager方法 #

无需新增服务，直接给NavigationManager添加扩展方法：

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

public static class NavigationManagerExtensions
{
    public static async Task NavigateToWithExternalCheck(this NavigationManager navManager, IJSRuntime jsRuntime, string uri)
    {
        if (uri.StartsWith("/admin/", StringComparison.OrdinalIgnoreCase))
        {
            await jsRuntime.InvokeVoidAsync("window.location.href", uri);
        }
        else
        {
            navManager.NavigateTo(uri);
        }
    }
}

组件中调用：

@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

<button @onclick="() => NavManager.NavigateToWithExternalCheck(JSRuntime, "/admin/users")">跳转到MVC用户管理</button>

方案3：全局拦截路由跳转 #

拦截所有导航场景（包括地址栏输入路径），在App.razor中配置：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
    <OnNavigateAsync>
        @{
            var targetUri = NavManager.ToAbsoluteUri(NavManager.Uri).AbsolutePath;
            if (targetUri.StartsWith("/admin/", StringComparison.OrdinalIgnoreCase))
            {
                // 取消Blazor导航，强制浏览器跳转至MVC路径
                await JSRuntime.InvokeVoidAsync("window.location.href", targetUri);
                return Task.CompletedTask;
            }
        }
    </OnNavigateAsync>
</Router>

@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

额外提示 #

• 确保MVC端已正确配置/admin/前缀的路由规则，存在对应的控制器和Action。
• 若使用<a>标签跳转，可直接添加target="_top"属性快速实现跳转：

<a href="/admin/dashboard" target="_top">跳转到MVC后台</a>

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