如何在Blazor中实现全局路由变更处理器？MAUI URL变更执行代码方法

在MAUI Blazor里，要监听全局URL变更并执行指定代码，直接用NavigationManager的LocationChanged事件就行，推荐在全局布局组件（比如MainLayout.razor）里实现，这样能覆盖所有页面的路由变化：

1. 注入NavigationManager服务
2. 在组件初始化时订阅事件，销毁时取消订阅避免内存泄漏

示例代码（MainLayout.razor）：

@inject NavigationManager NavManager
@implements IDisposable

<!-- 原布局代码保持不变 -->
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <main>
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    private IDisposable? _locationSubscription;

    protected override void OnInitialized()
    {
        // 订阅URL变更事件
        _locationSubscription = NavManager.LocationChanged += OnUrlChanged;
    }

    private void OnUrlChanged(object? sender, LocationChangedEventArgs e)
    {
        // 这里写你要执行的代码
        Console.WriteLine($"URL更新为：{e.Location}");
        // 比如做页面访问统计、权限校验、状态重置等操作
    }

    // 组件销毁时取消订阅，防止内存泄漏
    public void Dispose()
    {
        _locationSubscription?.Dispose();
    }
}

Blazor（不管是Server还是WASM）里实现全局路由处理，有几种实用方式：

方式一：监听URL变更事件（最常用） #

和MAUI Blazor逻辑一致，在全局布局组件里注入NavigationManager并订阅LocationChanged事件，代码和上面的MAUI示例完全通用，适合在路由变更后执行逻辑。

方式二：路由变更前拦截（.NET 7+） #

如果需要在用户跳转前做拦截（比如权限校验、非法跳转阻止），可以实现IAsyncNavigationInterceptor接口：

步骤1：创建自定义拦截器 #

public class GlobalNavigationInterceptor : IAsyncNavigationInterceptor
{
    public async ValueTask OnNavigationAsync(NavigationContext context)
    {
        var targetUrl = context.TargetLocation;
        Console.WriteLine("即将跳转到：" + targetUrl);

        // 示例：拦截/admin路径，未登录则跳转到登录页
        if (targetUrl.StartsWith("/admin") && !IsLoggedIn())
        {
            context.Cancel(); // 取消当前跳转
            context.NavigationManager.NavigateTo("/login");
        }

        await Task.CompletedTask;
    }

    // 替换成你的实际登录校验逻辑
    private bool IsLoggedIn()
    {
        return false;
    }
}

步骤2：注册服务 #

在Program.cs里添加：

builder.Services.AddScoped<IAsyncNavigationInterceptor, GlobalNavigationInterceptor>();

这个方法能拦截所有路由跳转，包括代码调用NavigateTo和用户点击导航链接，仅支持.NET 7及以上版本。

方式三：自定义RouteView（控制组件渲染） #

如果需要在路由对应的组件渲染前后执行逻辑，可以自定义RouteView：

步骤1：创建自定义RouteView类 #

public class CustomRouteView : RouteView
{
    protected override void Render(RenderTreeBuilder builder)
    {
        // 组件渲染前执行
        Console.WriteLine("即将渲染页面组件：" + RouteData.PageType.Name);

        // 渲染原组件
        base.Render(builder);

        // 组件渲染后执行
        Console.WriteLine("页面组件渲染完成：" + RouteData.PageType.Name);
    }
}

步骤2：替换App.razor中的默认RouteView #

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <!-- 用自定义的CustomRouteView替换默认RouteView -->
        <CustomRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>抱歉，当前路径不存在</p>
        </LayoutView>
    </NotFound>
</Router>

这样每次路由切换时，都会触发渲染前后的自定义逻辑。

内容的提问来源于stack exchange，提问作者Alex Zaitsev