如何在Blazor中实现同页面不同ID路由，点击超链页面重载且支持新标签打开

针对你遇到的点击超链接路由更新但页面不刷新、同时要保留新标签页打开功能的问题，有两种可行方案：

方案一：强制浏览器刷新页面（适用于需要全页重新加载的场景） #

用普通<a>标签，同时添加点击事件判断操作类型：只有普通左键点击时，阻止Blazor的客户端导航，改用NavigateTo强制加载页面；新标签页/右键点击时保留默认行为。

代码示例：

<a href="/observation/@(Id - 1)" @onclick="(e) => HandleNavClick(e, Id - 1)">上一页</a>
<a href="/observation/@(Id + 1)" @onclick="(e) => HandleNavClick(e, Id + 1)">下一页</a>

@code {
    [Parameter] public int Id { get; set; }
    [Inject] private NavigationManager NavManager { get; set; }

    private void HandleNavClick(MouseEventArgs e, int targetId)
    {
        // 过滤掉新标签页（Ctrl/Shift+点击）、右键点击的情况
        if (!e.CtrlKey && !e.ShiftKey && e.Button == 0)
        {
            e.PreventDefault();
            // forceLoad设为true，强制浏览器重新加载页面
            NavManager.NavigateTo($"/observation/{targetId}", forceLoad: true);
        }
    }
}

方案二：客户端内更新组件内容（适用于仅需刷新数据的场景） #

如果不需要全页刷新，只是希望页面内容随Id变化更新，可将数据加载逻辑移到OnParametersSetAsync方法中——每次路由参数Id变化时，自动重新加载对应观测记录。

代码示例：

@page "/observation/{Id:int}"

<a href="/observation/@(Id - 1)">上一页</a>
<a href="/observation/@(Id + 1)">下一页</a>

<div class="observation-content">
    @if (observation != null)
    {
        <p>记录ID：@observation.Id</p>
        <p>内容：@observation.Content</p>
    }
</div>

@code {
    [Parameter] public int Id { get; set; }
    private ObservationModel observation;

    protected override async Task OnParametersSetAsync()
    {
        // 每次Id变更时重新获取数据
        observation = await GetObservationById(Id);
    }

    // 模拟数据获取方法
    private async Task<ObservationModel> GetObservationById(int id)
    {
        // 替换为你的实际数据查询逻辑
        await Task.Delay(100);
        return new ObservationModel { Id = id, Content = $"第{id}条观测记录详情" };
    }

    private class ObservationModel
    {
        public int Id { get; set; }
        public string Content { get; set; }
    }
}

两种方案都保留了<a>标签的原生特性，用户可以正常右键选择“在新标签页打开”，同时满足点击导航时的页面更新需求。

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