如何在Blazor WebAssembly应用中传递全局URI参数？

针对你需要在应用启动时传入全局可用参数、支持桌面应用跳转携带参数的需求，提供以下两种可行方案：

方案一：直接在MainLayout中解析URL参数 #

利用NavigationManager解析当前URL路径，提取参数后通过级联参数传递给所有页面组件，无需额外页面或服务。

修改MainLayout代码： #

@inject NavigationManager NavManager
@inherits LayoutComponentBase

<div class="page d-flex" >

    <section class="navbar navbar-expand-lg navbar-light pr-lg-2 flex-lg-row w-100 position-fixed" style="z-index: 2; background-color: @vc_rojoFrisby;">
        <div class="container-fluid p-1 d-flex justify-content-between align-items-center">
            <nav style="color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 20px;">Restaurante Rastreo Domi @vc_RestId</nav>
            <div class="text-center">
                <img src="/img/icono_frisby.png" alt="logo_frisby" class="img-fluid" style="max-height: 40px; height:auto; width: auto;">
            </div>
            <div class="d-flex align-items-center">
                <nav style="color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 20px; margin-right: 10px;"> Restaurante: F54</nav>
                <DropdownMenu/>
            </div>
        </div>
    </section>

    <CascadingValue Value="@vc_RestId">
    <div class="mt-2 ml-5 mt-lg-4 mt-xl-5 mt-md-5 mt-sm-5 position-relative" style="flex-grow: 1; width:100%;">
        @Body
    </div>
    </CascadingValue>
</div>

@code
{
    public static string vc_rojoFrisby = "#E00109";
    public string vc_RestId { get; set; } = "";

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ExtractRestIdFromUrl();
        // 监听导航变化，确保参数更新时同步
        NavManager.LocationChanged += OnLocationChanged;
    }

    private void ExtractRestIdFromUrl()
    {
        var uri = new Uri(NavManager.Uri);
        // 提取根路径后的参数（如localhost:port/param中的param）
        var pathSegment = uri.AbsolutePath.TrimStart('/');
        vc_RestId = string.IsNullOrEmpty(pathSegment) ? "" : pathSegment;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        ExtractRestIdFromUrl();
        StateHasChanged();
    }

    // 取消订阅避免内存泄漏
    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

页面组件接收参数： #

在任意页面组件中通过级联参数获取：

@code {
    [CascadingParameter]
    public string vc_RestId { get; set; }
}

方案二：全局状态服务（适合复杂场景） #

如果需要在更多组件中共享参数或支持参数修改，使用Scoped状态服务更灵活。

1. 创建全局状态类 #

public class RestaurantState
{
    public string RestId { get; set; } = "";
}

2. 注册服务 #

在Program.cs中添加：

services.AddScoped<RestaurantState>();

3. 修改MainLayout代码 #

@inject NavigationManager NavManager
@inject RestaurantState RestaurantState
@inherits LayoutComponentBase

<div class="page d-flex" >

    <section class="navbar navbar-expand-lg navbar-light pr-lg-2 flex-lg-row w-100 position-fixed" style="z-index: 2; background-color: @vc_rojoFrisby;">
        <div class="container-fluid p-1 d-flex justify-content-between align-items-center">
            <nav style="color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 20px;">Restaurante Rastreo Domi @RestaurantState.RestId</nav>
            <div class="text-center">
                <img src="/img/icono_frisby.png" alt="logo_frisby" class="img-fluid" style="max-height: 40px; height:auto; width: auto;">
            </div>
            <div class="d-flex align-items-center">
                <nav style="color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 20px; margin-right: 10px;"> Restaurante: F54</nav>
                <DropdownMenu/>
            </div>
        </div>
    </section>

    <CascadingValue Value="@RestaurantState.RestId">
    <div class="mt-2 ml-5 mt-lg-4 mt-xl-5 mt-md-5 mt-sm-5 position-relative" style="flex-grow: 1; width:100%;">
        @Body
    </div>
    </CascadingValue>
</div>

@code
{
    public static string vc_rojoFrisby = "#E00109";

    protected override void OnInitialized()
    {
        base.OnInitialized();
        UpdateRestId();
        NavManager.LocationChanged += OnLocationChanged;
    }

    private void UpdateRestId()
    {
        var uri = new Uri(NavManager.Uri);
        var pathSegment = uri.AbsolutePath.TrimStart('/');
        RestaurantState.RestId = string.IsNullOrEmpty(pathSegment) ? "" : pathSegment;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        UpdateRestId();
        StateHasChanged();
    }

    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

4. 页面组件使用参数 #

可选两种方式：

// 方式一：级联参数
[CascadingParameter]
public string RestId { get; set; }

// 方式二：直接注入服务
@inject RestaurantState RestaurantState
<!-- 使用：@RestaurantState.RestId -->

为什么之前的方法失效？ #

• 普通[Parameter]：布局组件无法直接接收路由参数，路由参数仅传递给页面组件。
• 级联参数：之前未正确获取到参数源，导致级联值为空。

内容的提问来源于stack exchange，提问作者JuanMa Corrales