如何阻止Blazor NavLink组件的默认导航

Question

由于Blazor 3.1预览版2，应该可以防止Blazor中链接的默认导航行为，正如本答案中所讨论的那样。

然而，这个代码：

<NavLink href="" Match="Match" @onclick:preventDefault @onclick="()=>LinkAction()" >
Do something
</NavLink>

给出以下错误：

组件参数"onclick"用于组成部分参数必须是唯一的(不区分大小写(

为什么？

Answer 1

尽管HTML<A>标记和BlazorNavLink组件的最终结果大致相同，但@onclick:preventDefault语法仅适用于HTML版本，而不适用于Blazor组件。

Steve Sanderson在这里解释道：

恐怕没有通过任意指令属性，如@*：preventDefault作为组件参数，因此这在NavLink上不起作用。

Steve还给出了一个可能的解决方案：

但是，您可以从NavLink继承自己的子类"防止默认"行为。例如，创建NavLinkPreventDefault.razor，包含以下内容：

@inherits NavLink 
<a @attributes="@AdditionalAttributes" class="@CssClass" @onclick:preventDefault>
@ChildContent 
</a> 

现在您可以使用而不是获取你想要的行为。

Answer 2

如果删除参数href并设置@onclick，它将直接转到函数，您可以随心所欲：

<NavLink class="nav-link" Match="NavLinkMatch.Prefix" @onclick="() => SetToActive(item)">
<span class="pcoded-micon">
<b class="fa-custom fas fa-bars @item.Icon"></b>
</span>
<span class="pcoded-mtext">@item.Title</span>
</NavLink>

这将调用方法，在那里您可以调用路由：

private void SetToActive(CoolModel item)
{
// do something...
if (item.Route is not null)
{
_navigationManager.NavigateTo(item.Route);
}
}