You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor Server应用是否支持嵌套路由?含认证场景路由需求

Blazor Server 嵌套路由与直接地址访问实现方案

完全可以在Blazor Server中使用嵌套路由,并且支持通过浏览器地址栏直接访问你需要的多层路由(如/admin/info/userslist、/user/register/personalinfo)。以下是具体实现步骤,结合你已有的AuthenticationStateProvider身份认证场景:

一、构建嵌套路由组件结构

通过@page指令定义多层路由规则,父组件使用<RouterView />渲染子路由内容:

1. Admin系列组件

Admin.razor(父路由入口)

@page "/admin"
@page "/admin/{*route}"
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavManager

<AuthorizeView Roles="Admin">
    <Authorized>
        <h1>Admin控制台</h1>
        <!-- 渲染/admin下的所有子路由组件 -->
        <RouterView />
    </Authorized>
    <NotAuthorized>
        <p>无管理员权限,请登录后重试</p>
        <button @onclick="() => NavManager.NavigateTo("/login")">前往登录</button>
    </NotAuthorized>
</AuthorizeView>

Admin/Info.razor(二级路由)

@page "/admin/info"
@page "/admin/info/{*route}"

<h2>Admin信息管理</h2>
<!-- 渲染/admin/info下的子路由组件 -->
<RouterView />

Admin/Info/UsersList.razor(三级路由)

@page "/admin/info/userslist"

<h3>用户列表</h3>
<!-- 这里编写用户列表业务逻辑 -->

2. User系列组件

User.razor(父路由入口)

@page "/user"
@page "/user/{*route}"
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavManager

protected override async Task OnInitializedAsync()
{
    var authState = await AuthStateProvider.GetAuthenticationStateAsync();
    if (!authState.User.Identity.IsAuthenticated)
    {
        NavManager.NavigateTo("/login");
    }
}

<h1>用户中心</h1>
<!-- 渲染/user下的所有子路由组件 -->
<RouterView />

User/Register.razor(二级路由)

@page "/user/register"
@page "/user/register/{*route}"

<h2>用户注册</h2>
<!-- 渲染/user/register下的子路由组件 -->
<RouterView />

User/Register/PersonalInfo.razor(三级路由)

@page "/user/register/personalinfo"

<h3>个人信息填写</h3>
<!-- 这里编写注册表单业务逻辑 -->

二、关键配置说明

  1. 通配符路由:父组件中的/{*route}用于捕获所有子层级路由,确保父组件能匹配到以自身路由开头的所有路径
  2. 权限控制:结合AuthenticationStateProvider或AuthorizeView组件,在父路由层拦截未认证/无权限用户,跳转到登录页或对应权限页面
  3. 路由自动注册:Blazor Server会自动识别组件上的@page指令并注册路由,无需手动在Program.cs中配置额外路由规则

三、测试直接访问

启动应用后,直接在浏览器地址栏输入目标路由(如https://localhost:7282/admin/info/userslist),只要用户身份权限符合要求,即可直接进入对应的嵌套页面。

内容的提问来源于stack exchange,提问作者Alex Wright

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 13:22:09