Blazor 导航：在不更改重新加载页面的情况下更新 URL

Question

我在我的应用程序中使用 URL 参数作为页面状态。

如何在不实际导航的情况下更改 URL？

谢谢！

（使用 blazor 服务器端）

Answer 1

如果您只想添加/删除/更改 URL 中的查询参数，请使用该NavigationManager.NavigateTo方法。如果没有必要（或未使用forceReload标志调用），它将不会重新加载页面。

例如，当前URL是"https://example.com/page"，则调用NavigationManager.NavigateTo("https://example.com/page?id=1")不会重新加载页面，而只会修改URL。在浏览器中单击“返回”会将 URL 更改为"https://example.com/page"，此更改可以通过事件处理NavigationManager.LocationChanged。

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.navigationmanager.navigateto

Answer 2

您可以使用 JS Interop 执行此操作并调用 history.pushState(null, '', url)

这是一个简单的例子

。剃刀

@page "/"
@inject IJSRuntime jsRuntime

<input
    @bind="url"
/>

<button @onclick="ChangeUrl">
    Change Url
</button>

<p>@url</p>

@code {
    [Parameter]
    public string Url { get; set; }

    void ChangeUrl(){
        // You can also change it to any url you want
        jsRuntime.InvokeVoidAsync("ChangeUrl", Url);
    }
}

.js

window.ChangeUrl = function(url){
    history.pushState(null, '', url);   
}

请注意，这仅适用于视觉目的，它只会在服务器端为浏览器更改，您可能不会看到更改。