Blazor App Razor Pages带参数路由问题：动态页面匹配与跳转

1. 创建通用员工详情页 #

新建一个名为EmployeeDetail.razor的Razor组件，使用动态路由模板，把员工的Link作为路由参数的一部分，而非固定字符串：

@page "/{EmployeeLink}/{EmpID:int}/{Name}/{Title}"

<div class="employee-detail">
    <h2>员工信息</h2>
    <dl>
        <dt>链接标识</dt>
        <dd>@EmployeeLink</dd>
        <dt>员工ID</dt>
        <dd>@EmpID</dd>
        <dt>姓名</dt>
        <dd>@Name</dd>
        <dt>职位</dt>
        <dd>@Title</dd>
    </dl>
</div>

@code {
    // 自动绑定路由参数
    [Parameter]
    public string EmployeeLink { get; set; }

    [Parameter]
    public int EmpID { get; set; }

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

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

    // 可选：根据ID加载真实数据（避免URL参数被篡改）
    protected override async Task OnInitializedAsync()
    {
        // 示例：调用后端接口获取完整员工信息
        // var employee = await _employeeService.GetById(EmpID);
        // if (employee != null)
        // {
        //     Name = employee.Name;
        //     Title = employee.Title;
        // }
    }
}

2. 优化跳转代码（处理特殊字符） #

原跳转逻辑中，姓名、职位等字段可能包含空格或特殊字符，需用Uri.EscapeDataString做URL编码，避免路由匹配失败：

// 对含特殊字符的参数编码
var encodedName = Uri.EscapeDataString(Employee.Name);
var encodedTitle = Uri.EscapeDataString(Employee.Title);
var encodedLink = Uri.EscapeDataString(Employee.Link);

// 执行路由跳转
UriHelper.NavigateTo($"{encodedLink}/{Employee.EmployeeID}/{encodedName}/{encodedTitle}");

3. 核心逻辑说明 #

• 路由模板/{EmployeeLink}/{EmpID:int}/{Name}/{Title}会匹配任意[员工Link]/[ID]/[姓名]/[职位]格式的URL，无需为每个员工单独创建页面
• 用[Parameter]标记的属性会自动绑定路由中的对应参数值
• 建议优先通过EmpID从后端加载真实数据，不要直接依赖URL中的Name和Title（防止用户手动篡改URL参数）

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