C#怎么使用Blazor NavigationManager实现页面导航与路由操作

在Blazor应用开发中，页面之间的跳转和路由管理是必不可少的功能，C#提供的NavigationManager服务专门用于处理这类需求，它封装了导航相关的所有操作，开发者无需手动操作浏览器地址栏就能实现灵活的页面切换。

NavigationManager基础介绍

NavigationManager是Blazor框架内置的服务，位于Microsoft.AspNetCore.Components命名空间下，它提供了当前页面路由信息获取、导航跳转、路由变化监听等能力，支持服务端Blazor和WebAssembly Blazor两种托管模式。

注入NavigationManager

要在组件中使用NavigationManager，首先需要通过依赖注入的方式获取实例，在Razor组件中可以直接使用@inject指令注入，在C#代码文件中则通过构造函数注入。

Razor组件注入示例

@page "/nav-demo"
@inject NavigationManager Navigation

<h3>导航演示页面</h3>

C#类文件注入示例

using Microsoft.AspNetCore.Components;

public class NavService
{
    private readonly NavigationManager _navigation;

    public NavService(NavigationManager navigation)
    {
        _navigation = navigation;
    }
}

NavigationManager常用属性

NavigationManager提供了几个核心属性，用于获取当前路由的相关信息，具体属性说明如下：

以下是获取当前路由信息的示例代码：

@page "/nav-demo"
@inject NavigationManager Navigation

<p>当前完整URI：@Navigation.Uri</p>
<p>应用基础URI：@Navigation.BaseUri</p>

@code {
    protected override void OnInitialized()
    {
        // 监听路由变化
        Navigation.LocationChanged += (sender, args) =>
        {
            Console.WriteLine($"路由已变化，新地址：{args.Location}");
        };
    }
}

NavigationManager核心导航方法

NavigationManager提供了多个导航相关的方法，覆盖不同的跳转场景，最常用的是NavigateTo方法。

基础页面跳转

NavigateTo方法用于跳转到指定URI，第一个参数是目标路径，第二个参数可选，表示是否强制刷新页面。

@page "/home"
@inject NavigationManager Navigation

<button @onclick="GoToAbout">跳转到关于页面</button>

@code {
    private void GoToAbout()
    {
        // 跳转到/about页面，不强制刷新
        Navigation.NavigateTo("/about");
    }
}

带参数的路由跳转

如果目标页面是带参数的路由，只需要在跳转路径中拼接对应的参数即可，目标页面通过[Parameter]特性接收参数。

@page "/user/{id}"
@inject NavigationManager Navigation

<h3>用户详情页</h3>
<p>用户ID：@Id</p>
<button @onclick="GoToUser">跳转到用户1001的详情页</button>

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

    private void GoToUser()
    {
        // 跳转到带参数的路由
        Navigation.NavigateTo("/user/1001");
    }
}

返回上一页与刷新当前页

NavigationManager没有直接提供返回上一页的方法，但是可以通过浏览器的历史记录实现，刷新当前页可以跳转到当前URI并强制刷新。

@page "/nav-demo"
@inject NavigationManager Navigation

<button @onclick="GoBack">返回上一页</button>
<button @onclick="RefreshPage">刷新当前页</button>

@code {
    private void GoBack()
    {
        // 调用浏览器历史记录返回上一页
        Navigation.NavigateTo("javascript:history.back()");
    }

    private void RefreshPage()
    {
        // 强制刷新当前页面，第二个参数传true
        Navigation.NavigateTo(Navigation.Uri, true);
    }
}

导航拦截与取消

在某些场景下，比如用户修改了表单但未保存，我们需要在用户跳转页面时给出提示，此时可以监听LocationChanging事件实现导航拦截。

@page "/form"
@inject NavigationManager Navigation
@implements IDisposable

<h3>表单页面</h3>
<input @bind="formContent" placeholder="输入表单内容" />

@code {
    private string formContent = "";
    private IDisposable _locationChangingSubscription;

    protected override void OnInitialized()
    {
        // 订阅路由变化前事件
        _locationChangingSubscription = Navigation.RegisterLocationChangingHandler(OnLocationChanging);
    }

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        // 如果表单内容不为空，提示用户是否离开
        if (!string.IsNullOrEmpty(formContent))
        {
            bool confirm = confirm("表单内容未保存，确定要离开吗？");
            if (!confirm)
            {
                // 取消导航
                context.PreventNavigation();
            }
        }
        return ValueTask.CompletedTask;
    }

    public void Dispose()
    {
        _locationChangingSubscription?.Dispose();
    }
}

注意事项

• 使用NavigationManager时，跳转的路径如果是相对路径，会基于当前页面路径拼接，建议使用绝对路径避免路径错误
• 在组件销毁时，如果订阅了LocationChanged事件，需要手动取消订阅，避免内存泄漏
• 强制刷新页面（NavigateTo第二个参数传true）会重新加载整个应用，仅在必要时使用
• 导航拦截功能仅在.NET 7及以上版本的Blazor中支持，低版本需要使用其他方式实现

BlazorNavigationManagerC#_页面导航Blazor_路由修改时间：2026-07-08 08:00:33