Blazor中使用NavigationManager跳转页面且不修改URL的实现方案

我实现了一套动态重写机制，在名为Rewrite的数据表中存储所有键（Key）以及对应的目标页面和参数，示例如下：

我的Products.razor页面指令为：

@page/{red}/{green}/{blue}

并定义了如下参数：

[Parameter]
public string red{ get; set; }

[Parameter]
public string green{ get; set; }

[Parameter]
public string blue{ get; set; }

Index.razor作为该机制的入口，页面指令为：

@page "/"
@page "/{key}"

在Index.razor.cs中，代码如下：

public partial class Index : BaseComponent
{
    [Parameter]
    public string key { get; set; }
    [Inject] protected HttpClient Http { get; set; }
    [Inject] protected NavigationManager NavigationManager { get; set; }


    protected override async Task OnParametersSetAsync()
    {
        if (key != null)
        {
            Rewrite r = await Http.GetFromJsonAsync<Rewrite>($"api/Rewrite/GetRewriteByKey/{0}/{key}");
            
            NavigationManager.NavigateTo($"{r.Page}/{r.Red}/{r.Green}/{r.Blue}");
        }
        base.OnParametersSet();
    }
}

我希望保持浏览器URL为red-products这类键值的同时，加载携带对应参数的Products页面，就像ASP.NET Web Forms中使用Context.RewritePath($"{r.Page}/{r.Red}/{r.Green}/{r.Blue}")的效果。请问这是否可行？或是有更优的重写处理方式？

可行性说明 #

你当前的实现会通过NavigationManager.NavigateTo修改浏览器URL，无法达到保持原URL的效果，所以直接用这种方式不可行。Blazor的客户端路由机制默认会同步URL和渲染的页面，要实现类似RewritePath的“URL不变但渲染目标页面”的效果，需要从路由匹配层面入手。

更优处理方式 #

1. 自定义路由转换器（推荐） #

实现Blazor的路由参数转换器，让路由系统直接将key映射到Products页面的参数，同时保持URL不变：

• 创建实现IParameterConverter的自定义转换器，在转换逻辑中从Rewrite表查询对应参数值。
• 修改Products.razor的页面指令，添加支持key参数的路由：

  @page "/{key:rewriteKey}"
  @page "/{red}/{green}/{blue}"
  

• 将自定义转换器注册到服务容器，Blazor路由系统匹配/red-products这类URL时，会自动查询参数并渲染Products页面，无需经过Index页面中转。

2. 服务器端URL重写（适用于Blazor Server/托管模式） #

如果是Blazor Server或WASM托管在ASP.NET Core后端，可在后端配置URL重写中间件，直接将/red-products这类请求重写为目标路径，同时保持浏览器URL不变：

var rewriteOptions = new RewriteOptions();
rewriteOptions.Add(RewriteMiddleware);

app.UseRewriter(rewriteOptions);

// 自定义重写逻辑
async Task RewriteMiddleware(RewriteContext context)
{
    var requestPath = context.HttpContext.Request.Path.Value;
    if (requestPath.StartsWith("/") && requestPath.Length > 1)
    {
        var key = requestPath.TrimStart('/');
        // 从数据库查询Rewrite记录
        var rewriteRecord = await GetRewriteRecordFromDb(key);
        if (rewriteRecord != null)
        {
            context.HttpContext.Request.Path = $"/{rewriteRecord.Page}/{rewriteRecord.Red}/{rewriteRecord.Green}/{rewriteRecord.Blue}";
        }
    }
}

这种方式对前端完全透明，效果和Web Forms的RewritePath完全一致。

3. 客户端路由拦截（适用于Blazor WASM） #

在Blazor WASM中，可通过订阅NavigationManager.LocationChanged事件拦截URL，查询Rewrite表后直接渲染目标页面并阻止URL变更：

@inject NavigationManager NavManager
@inject HttpClient Http

protected override void OnInitialized()
{
    NavManager.LocationChanged += OnLocationChanged;
}

private async void OnLocationChanged(object sender, LocationChangedEventArgs e)
{
    var path = new Uri(e.Location).AbsolutePath.TrimStart('/');
    if (!string.IsNullOrEmpty(path) && !path.Contains("/Products/"))
    {
        var rewriteRecord = await Http.GetFromJsonAsync<Rewrite>($"api/Rewrite/GetRewriteByKey/{path}");
        if (rewriteRecord != null)
        {
            // 阻止默认导航并替换路由状态（保持URL不变）
            NavManager.NavigateTo(e.Location, forceLoad: false, replace: true);
            // 手动构建目标路由并导航（replace模式不会修改URL）
            await NavManager.NavigateTo($"Products/{rewriteRecord.Red}/{rewriteRecord.Green}/{rewriteRecord.Blue}", replace: true);
        }
    }
}

这种方式需要处理较多路由细节，推荐优先使用前两种方案。

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