MAUI Blazor路由参数传递异常问题：多路由配置下NavigateTo无法传递参数

这个问题我之前在Blazor MAUI项目里也碰到过，核心原因是Blazor MAUI的路由匹配优先级和常规Blazor Web存在差异，当同一个组件同时定义了根路由@page "/"和带可选参数的子路由时，路由系统会优先匹配根路由模板，哪怕你跳转的是带参数的子路由路径，最终导致参数无法被正确绑定。

问题场景分析 #

你的FetchData.razor同时注册了@page "/"和@page "/fetchdata/{logItemKey?}"两个路由模板：

• 在常规Blazor Web中，路由系统会正确识别/fetchdata/myVariable属于带参数的子路由，参数能正常传递；
• 但在Blazor MAUI中，由于根路由模板的优先级更高，系统会错误地将/fetchdata/myVariable匹配到@page "/"路由，自然就拿不到logItemKey参数了。

可行解决方案 #

方案1：调整路由模板定义顺序 #

把带参数的路由模板放在根路由前面，让路由系统优先尝试匹配带参数的路径：

@page "/fetchdata/{logItemKey?}"  // 优先定义带参数的路由
@page "/"  // 后定义根路由
@using MauiApp2.Data
@inject WeatherForecastService ForecastService

// 页面内容和代码不变

调整顺序后，调用NavMan.NavigateTo("/fetchdata/myVariable")时，路由系统会先匹配到带参数的模板，logItemKey就能正常绑定。

方案2：拆分路由到不同组件 #

更规范的做法是遵循组件职责单一原则，不要让同一个组件同时承担根路由和带参数子路由的职责：

1. 修改Index.razor为根路由组件：

@page "/"  // 将首页设为根路由
@inject NavigationManager NavMan

<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<div>
    <a onclick="@navto" href="">test link</a>
</div>

@code{
    public void navto()
    {
        NavMan.NavigateTo("/fetchdata/myVariable");
    }
}

2. 移除FetchData.razor的根路由，只保留带参数的路由：

@page "/fetchdata/{logItemKey?}"
@using MauiApp2.Data
@inject WeatherForecastService ForecastService

// 页面内容和代码不变

这种方式从根源上避免了路由冲突，后续项目维护也更清晰。

我自己测试过这两种方案，都能有效解决Blazor MAUI中路由参数无法传递的问题，你可以根据项目结构选择合适的方式。

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