Blazor：如何根据路由指定不同的布局文件？

你需要的按URL前缀匹配不同布局的功能可以实现，但直接在<Found>中放置多个<RouteView>会导致页面重复渲染——所有匹配的RouteView都会执行渲染逻辑。正确的做法是根据当前路由路径动态选择对应的布局，以下是可行的实现方式：

方法：基于路径前缀判断动态切换布局 #

修改App.razor中的Router代码，通过判断路由路径前缀来匹配对应布局：

<Router AppAssembly="@typeof(Routes).Assembly">
    <Found Context="routeData">
        @{
            var pagePath = routeData.RouteValues["page"]?.ToString() ?? string.Empty;
            // 设置默认布局，可根据项目需求调整
            Type targetLayout = typeof(MainLayout);

            if (pagePath.StartsWith("/admin/", StringComparison.OrdinalIgnoreCase))
            {
                targetLayout = typeof(AdminLayout);
            }
            else if (pagePath.StartsWith("/user/", StringComparison.OrdinalIgnoreCase))
            {
                targetLayout = typeof(UserLayout);
            }
        }

        <RouteView RouteData="@routeData" DefaultLayout="@targetLayout" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

关键说明 #

• 确保AdminLayout、UserLayout已在项目中正确定义并引用
• 使用StringComparison.OrdinalIgnoreCase避免路径大小写敏感问题
• 若需匹配更多前缀，可扩展if-else逻辑或改用switch语句优化

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