NavLink 更新 URL，但不会在 Blazor 中重新加载页面

Question

我有一个 ProjectBase.razor 页面，用于创建、查看和编辑项目。以下路线均可带您到达此页面：

/project/view/{projNum}
/project/create/
/project/edit/{projNum}

我的导航菜单中还有一个导航链接，可让您创建新项目：

<NavLink class="nav-link" href="/Project/Create" Match="NavLinkMatch.All" >
    <span aria-hidden="true">New Project</span>
</NavLink>

如果我在同一页面的查看/编辑功能上单击该链接，URL 会更改为“/Project/Create”，但页面本身不会刷新或重新加载。有没有办法通过 NavLink 强制执行此操作？或者我需要添加 OnClick 函数来执行此操作吗？

Answer 1

在页面的代码块中创建并使用 OnParametersSetAsync 任务。当参数更改时，此事件将触发。

@code
protected override async Task OnParametersSetAsync()
{
// This event will fire when the parameters change
// Put your code here.  

}

Answer 2

是的，使用类似

Microsoft.AspNetCore.Components.NavigationManager

及其 NavigateTo 函数并将forceLoad 设置为 true 将实现您正在寻找的内容。

当然是的，这需要您设置一个 onclick 函数，但这就是我最终为站点范围的搜索页面完成类似操作的方式，从技术上讲，该页面的 URL 从未在我的查询字符串搜索值之外发生变化通过了。

话虽如此，仅使用 NavLink 可能有一种不错的方法。当我不在手机上时，我会更新我的答案。

Answer 3

在我的组件中，我已经重写了

OnInitializedAsync

，以便进行 API 调用来获取我的数据。

我的解决方案如下所示：

        protected override async Task OnInitializedAsync()
        {
           // Make your API call or whatever else you use to initialize your component here
        }

        protected override async Task OnParametersSetAsync()
        {
            await OnInitializedAsync();
        }

Answer 4

在你的情况下，你必须按照罗德·威尔（Rod Weir）提到的那样进行以下更改，我只是扩展答案。

 /project/view/{projNum}
 /project/create/
 /project/edit/{projNum}

对于上述查询参数，您必须在代码中定义[参数]。

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

然后添加方法

protected override async Task OnParametersSetAsync()
{

  var projectDetail = await getProjectDetails(projNum); // ProgNum will change as it get changes in url, you don't have to do anything extra here.
}

强制页面重新加载会给你带来一些其他问题，它会得到正确的结果，但页面行为会改变。页面上还有其他组件，例如标题/左侧导航/等，如果它们是动态的，则这些组件不会更改。它将迫使您进行更改并强制重新加载所有组件。用户体验也受到影响。

希望这有帮助。

Answer 5

我也有同样的问题。我的解决方案是...

创建新页面

@page "/project/create/"
<ProjectBase></ProjectBase>

就是这样！从

@page

页面

 删除 (

/project/create/

) 的 

ProjectBase

指令

一切都会按预期工作...现在对您拥有的所有页面执行此操作。

Answer 6

这是设计使然。页面本身不会刷新或重新加载，因为

<NavLink>

不会向服务器发送请求（F12 检查）并且它会重定向到客户端上的同一页面，因此不会有任何更新。

如果您在浏览器中输入这些 URL，它们将发送请求，然后刷新页面。

解决方法是您可以根据当前路线显示不同的内容。

@page "/project/view/{projNum}"
@page "/project/create/"
@page "/project/edit/{projNum}"
@using Models
<h3>ProjectBase</h3>

@if (projNum == null)
{
<EditForm Model="@createModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="createModel.Name" />

    <button type="submit">Create</button>
</EditForm>
}
else
{


<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>
}
@code {


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

    private ExampleModel createModel = new ExampleModel();
    private ExampleModel exampleModel = new ExampleModel();

    protected override void OnInitialized()
    {
        exampleModel.Name = projNum;
    }



    private void HandleValidSubmit()
    {
        //your logic
        Console.WriteLine("OnValidSubmit");
    }
}

Answer 7

我知道这是一篇旧文章，但这里有一个简单的解决方案，适用于仍然遇到问题的任何人。我理解意外行为的原因，但是当覆盖 HTML 的默认行为时，您必须提供一种简单的方法来恢复到规范 — 特别是对于超文本导航这样的基本功能。现在我们需要创建一个简单的超链接。无论如何，只需将下面的 onlick 事件复制并粘贴到每个导航链接中，它们就会按预期工作。

<NavLink class="nav-link" href="/Project/Create" Match="NavLinkMatch.All" onclick="location.href=this.href;return true;" >
<span aria-hidden="true">New Project</span>