Blazor WASM中如何将@开头的请求重定向至指定组件

Blazor WASM基于客户端路由体系，无法直接复用ASP.NET Core的服务器端中间件，但可以通过以下两种方式实现全局请求捕获与重定向：

方法一：利用Router组件的OnNavigateAsync回调 #

这是最直接的全局拦截方案，Router组件负责客户端路由导航，通过其OnNavigateAsync参数可拦截所有导航请求：

1. 打开App.razor文件，为Router组件添加OnNavigateAsync属性并绑定处理方法：

<Router AppAssembly="@typeof(App).Assembly" OnNavigateAsync="@HandleNavigation">
    <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>
</Router>

2. 在App.razor的@code块中实现拦截逻辑：

@inject NavigationManager NavManager

private async Task HandleNavigation(NavigationContext context)
{
    var path = NavManager.ToRelativePath(context.Path);
    
    // 匹配以@开头的路径
    if (!string.IsNullOrEmpty(path) && path.StartsWith("@"))
    {
        // 取消原导航请求
        context.Cancel = true;
        // 重定向到目标组件，示例将@michel转为/user/michel
        var targetPath = $"/user/{path.TrimStart('@')}";
        NavManager.NavigateTo(targetPath, forceLoad: false);
    }
}

• NavigationContext包含当前导航的路径信息，设置context.Cancel = true可终止原导航
• forceLoad: false表示使用客户端路由跳转，不会触发页面刷新

方法二：订阅NavigationManager的LocationChanged事件 #

如果需要更灵活的全局拦截逻辑（比如跨组件共享拦截规则），可通过订阅NavigationManager的事件实现：

1. 创建全局拦截服务NavigationInterceptor.cs：

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Routing;

public class NavigationInterceptor
{
    private readonly NavigationManager _navManager;
    private bool _isRedirecting; // 标记重定向状态，避免循环触发

    public NavigationInterceptor(NavigationManager navManager)
    {
        _navManager = navManager;
        _navManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        if (_isRedirecting)
        {
            _isRedirecting = false;
            return;
        }

        var path = _navManager.ToRelativePath(e.Location);
        if (!string.IsNullOrEmpty(path) && path.StartsWith("@"))
        {
            _isRedirecting = true;
            var targetPath = $"/user/{path.TrimStart('@')}";
            _navManager.NavigateTo(targetPath, forceLoad: false);
        }
    }
}

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

builder.Services.AddSingleton<NavigationInterceptor>();

3. 在App.razor中注入服务以激活事件订阅：

@inject NavigationInterceptor NavigationInterceptor

配套配置说明 #

• 确保目标组件已配置对应路由，比如User.razor：

  @page "/user/{username}"
  <h1>用户主页：@Username</h1>
  
  @code {
      [Parameter]
      public string Username { get; set; } = string.Empty;
  }
  

• 若用户直接在浏览器地址栏输入@开头的URL，需确保服务器配置了回退路由（Blazor WASM默认的web.config或Nginx配置已包含该规则，确保所有请求返回index.html）

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