在Blazor MainLayout中处理路由参数的实现方案咨询

1. 配置根路由模板，统一捕获store-slug #

修改App.razor，将Router组件配置为优先匹配带{store-slug}的根路由，指定中间组件承载子路由逻辑，替代直接渲染RouteView：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(StoreHost)" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

2. 创建StoreHost中间组件，捕获并共享store-slug #

新建StoreHost.razor组件，作为路由的中间层，负责捕获store-slug并将其存入全局状态，再渲染MainLayout和子页面：

@layout MainLayout
@inject IStoreState StoreState
@inject NavigationManager NavManager

@page "/{storeSlug}"
@page "/{storeSlug}/{*route}"

@code {
    [Parameter]
    public string StoreSlug { get; set; } = string.Empty;

    [Parameter]
    public string? Route { get; set; }

    protected override void OnInitialized()
    {
        // 将门店Slug存入全局状态，供所有页面调用
        StoreState.CurrentStoreSlug = StoreSlug;
        
        // 处理仅输入store-slug的场景，重定向到默认页面
        if (string.IsNullOrEmpty(Route))
        {
            NavManager.NavigateTo($"/{StoreSlug}/products", forceLoad: false);
        }
    }
}

3. 实现全局状态服务，共享门店信息 #

创建全局状态服务，用于存储当前门店Slug，避免页面重复获取参数：

public interface IStoreState
{
    string CurrentStoreSlug { get; set; }
}

public class StoreState : IStoreState
{
    public string CurrentStoreSlug { get; set; } = string.Empty;
}

在Program.cs中注册该服务：

builder.Services.AddScoped<IStoreState, StoreState>();

4. 简化页面路由，移除重复的store-slug参数 #

现在页面路由可直接使用无前缀的路径，无需重复定义store-slug：

• ProductDetail.razor: @page "/products/{productSlug}"
• Checkout.razor: @page "/checkout"
• Login.razor: @page "/login"

这些页面会自动嵌套在/{store-slug}/前缀下，页面可通过注入IStoreState直接获取当前门店Slug。

5. 在MainLayout中统一处理门店逻辑 #

在MainLayout.razor中注入全局状态服务，直接使用门店信息做统一处理：

@inject IStoreState StoreState

<div class="main">
    <div class="top-row px-4">
        <h2>@StoreState.CurrentStoreSlug</h2>
        <!-- 其他布局元素 -->
    </div>
    <div class="content px-4">
        @Body
    </div>
</div>

核心逻辑说明 #

这种方案通过路由嵌套+全局状态共享实现了类似MVC Areas的效果：

• StoreHost作为顶层路由组件，一次性捕获门店Slug，避免所有页面重复定义参数
• 全局状态服务确保所有组件可便捷获取门店信息，无需从页面参数中重复提取
• 子页面路由保持简洁，仅关注自身业务路径

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