Blazor页面URL配置：从appsettings.json读取自定义路由

原方法中直接在@page "LOGIN_URL"里写配置键是行不通的——Blazor的@page指令是编译时解析的，它只会把引号里的内容当作字面量路由路径，不会去读取appsettings.json里的配置值。

解决方案步骤 #

1. 保留appsettings.json配置

确保配置文件中路由路径正确：

{
  "LOGIN_URL": "496436/login"
}

2. 移除Login.razor中的@page指令

删掉Login.razor顶部的@page行，后续通过代码动态注册路由。

3. 在Program.cs中动态绑定路由

根据Blazor项目类型选择对应代码：

Blazor Server项目

var builder = WebApplication.CreateBuilder(args);

// 从配置读取登录页路由，设置默认值避免配置缺失
var loginRoute = builder.Configuration["LOGIN_URL"] ?? "/login";

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.MapBlazorHub();
// 动态映射Login组件到配置的路由
app.MapComponent<Login>(loginRoute);

app.Run();

Blazor WebAssembly项目

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// 读取配置并格式化路由格式
var loginRoute = builder.Configuration["LOGIN_URL"] ?? "/login";
var formattedRoute = $"/{loginRoute.TrimStart('/')}";

// 动态注册Login组件到目标路由
builder.RootComponents.Add<Login>(formattedRoute);

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

4. 验证效果

启动项目后，访问配置的496436/login路径即可加载Login页面。后续修改appsettings.json中的路由值，重启项目（或启用配置热重载）即可生效。

额外提示 #

• 若需配置热重载，可在Program.cs中添加对应支持，修改配置后无需重启即可更新路由（Server项目需额外处理，WebAssembly需刷新页面）。
• 确保配置的路由路径不与其他页面路由冲突，避免匹配异常。

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