Blazor自定义网页导航异常：无法定位编辑页面问题排查

核心问题：路由定义不符合Blazor规则 #

你的编辑页面路由写法错误，导致URL无法匹配到对应页面，触发404错误；同时首页的编辑链接存在冗余写法，可能引发不必要的格式问题。

修复步骤 #

1. 修正编辑页的路由定义 #

Blazor路由参数的正确格式是{参数名:类型}，不需要额外使用string.Format。

修改前：

@page "/vehiclelist/edit/@string.Format({vehID:string})"

修改后：

@page "/vehiclelist/add"
@page "/vehiclelist/edit/{vehID:string}"

2. 简化首页的编辑链接 #

原链接中的string.Format属于冗余写法，直接绑定veh.VehicleNumber即可。推荐使用Blazor原生的NavLink组件替代原生<a>标签，更适配单页应用路由机制：

修改前：

<a href='/vehiclelist/edit/@string.Format(@veh.VehicleNumber)' class="btn btn-outline-dark" role="button">Edit</a>

修改后（推荐方案）：

<NavLink href="/vehiclelist/edit/@veh.VehicleNumber" class="btn btn-outline-dark" role="button">Edit</NavLink>

若坚持使用原生<a>标签，简化为：

<a href='/vehiclelist/edit/@veh.VehicleNumber' class="btn btn-outline-dark" role="button">Edit</a>

3. 验证参数接收与数据加载逻辑 #

当前后端代码的参数定义是正确的，可在OnParametersSetAsync中添加调试输出，确认vehID是否被正确赋值：

protected override async Task OnParametersSetAsync()
{
    Console.WriteLine($"Received vehID: {vehID}"); // 调试用，确认参数接收状态
    
    if (!string.IsNullOrEmpty(vehID))
    {
        Title = "Edit";
        veh = await VehicleService.Details(vehID);
    }
}

4. 处理特殊字符（可选） #

如果VehicleNumber包含斜杠、空格等特殊字符，需对URL进行编码。可在首页后台注入NavigationManager，编写编码跳转方法：

[Inject]
public NavigationManager NavigationManager { get; set; } = null!;

public void NavigateToEdit(string vehicleNumber)
{
    var encodedNumber = Uri.EscapeDataString(vehicleNumber);
    NavigationManager.NavigateTo($"/vehiclelist/edit/{encodedNumber}");
}

前端调用：

<button class="btn btn-outline-dark" @onclick="() => NavigateToEdit(veh.VehicleNumber)">Edit</button>

验证修复 #

完成修改后，点击编辑按钮将正确跳转到/vehiclelist/edit/[车辆编号]页面，vehID参数会被正常传递，触发数据加载逻辑，显示对应车辆的编辑表单。

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