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> <!-- 这里编写注册表单业务逻辑 -->
二、关键配置说明
- 通配符路由:父组件中的
/{*route}用于捕获所有子层级路由,确保父组件能匹配到以自身路由开头的所有路径 - 权限控制:结合
AuthenticationStateProvider或AuthorizeView组件,在父路由层拦截未认证/无权限用户,跳转到登录页或对应权限页面 - 路由自动注册:Blazor Server会自动识别组件上的
@page指令并注册路由,无需手动在Program.cs中配置额外路由规则
三、测试直接访问
启动应用后,直接在浏览器地址栏输入目标路由(如https://localhost:7282/admin/info/userslist),只要用户身份权限符合要求,即可直接进入对应的嵌套页面。
内容的提问来源于stack exchange,提问作者Alex Wright
相关产品推荐
相关产品推荐

