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

Question

自Blazor 3.1 Preview 2以来，应该可以阻止Blazor中链接的默认导航行为，如此文章和这个答案所讨论的。

然而，以下代码：

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

出现如下错误：

此组件中的组件参数 'onclick' 被使用了两次或以上。组件参数必须是唯一的（不区分大小写）。

为什么会出现这个错误？

- tomRedox

Answer 1

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

Steve Sanderson 在这里解释了这个问题:

恐怕没有传递任意指令属性（例如 @*:preventDefault）作为组件参数的机制，因此这不应该在 NavLink 上起作用。

Steve 还提供了一个可能的解决方案：

However, you could inherit your own subclass from NavLink that adds the "prevent default" behavior. For example, create NavLinkPreventDefault.razor, containing this:

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

Now you can use instead of to get the behavior you want.

- tomRedox

---

这给了我我所需的东西。我只是将硬编码的preventDefault属性更改为参数，以便可以动态设置：@inherits NavLink <a @attributes="@AdditionalAttributes" class="@CssClass" @onclick:preventDefault="OnClickPreventDefault">@ChildContent</a> @code { [Parameter] public bool OnClickPreventDefault { get; set; } } - Moo

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);
    }
}

- Fernando Silva