如何在NavLink或锚点中实现NavigationManager.NavigateTo的功能？

要实现和NavigationManager.NavigateTo(..., forceLoad: true)相同的强制整页跳转效果，有两种可行方案：

方案1：使用原生锚点<a>标签 #

原生<a>标签的默认行为就是触发整页刷新，完全匹配forceLoad: true的效果，实现最简单：

<p>
    @foreach (var item in items)
    {
        <div class="row">
            <div class="col">
                <a href="@($"Controller/Action?value1={item.Value1}&value2={item.Value2}")">
                    @item.Description
                </a>
            </div>
        </div>
    }
</p>

注意：将item.Value1和item.Value2替换为实际对应每个item的属性字段。

方案2：使用NavLink配合点击事件（保留NavLink样式） #

如果需要保留NavLink的路由匹配高亮样式，可通过绑定点击事件手动调用NavigateTo并传入forceLoad: true，同时阻止NavLink的默认客户端导航行为：

1. 首先在组件中注入NavigationManager：

@inject NavigationManager NavigationManager

2. 修改循环中的代码：

<p>
    @foreach (var item in items)
    {
        var url = $"Controller/Action?value1={item.Value1}&value2={item.Value2}";
        <div class="row">
            <div class="col">
                <NavLink href="@url" @onclick="() => HandleForceLoadNavigation(url)" @onclick:preventDefault>
                    @item.Description
                </NavLink>
            </div>
        </div>
    }
</p>

@code {
    private void HandleForceLoadNavigation(string url)
    {
        NavigationManager.NavigateTo(url, forceLoad: true);
    }
}

这里通过@onclick:preventDefault阻止NavLink的默认客户端跳转，转而调用自定义方法触发强制整页刷新。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono