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



我在应用程序中使用URL参数来表示页面状态。

如何在不进行实际导航的情况下更改URL?

谢谢!

(使用blazor服务器端(

您可以使用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);   
}

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

如果您只想在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

相关内容

  • 没有找到相关文章

最新更新