Blazor WASM应用中如何兼顾静态页面与动态单词路由适配？

一、静态页面路由配置 #

直接在对应组件上用@page指令定义固定路由，Blazor会优先匹配这类明确的路由规则：

// Home.razor
@page "/"
@page "/Home"

<h1>首页</h1>

// Info.razor
@page "/Info"

<h1>信息页面</h1>

二、动态页面路由处理 #

1. 创建动态内容渲染组件 #

新建DynamicPage.razor组件，用通配符路由模板匹配单个单词路径，同时在组件内完成数据库校验：

@page "/{PageSlug}"
@inject IDynamicPageService DynamicPageService
@inject NavigationManager NavigationManager

@if (_validPage != null)
{
    <div>@((MarkupString)_validPage.Content)</div>
}
else
{
    <h1>404 - 页面不存在</h1>
    <p>您访问的自定义页面未被创建或已失效</p>
}

@code {
    [Parameter]
    public string PageSlug { get; set; }

    private DynamicPageDto _validPage;

    protected override async Task OnInitializedAsync()
    {
        // 从数据库校验路径是否为有效动态页面
        _validPage = await DynamicPageService.GetValidPage(PageSlug);

        // 若无效，也可直接跳转到统一404页面
        // if (_validPage == null) NavigationManager.NavigateTo("/NotFound");
    }
}

2. 实现动态页面校验服务 #

创建服务类封装数据库查询逻辑，负责判断路径是否有效：

public interface IDynamicPageService
{
    Task<DynamicPageDto> GetValidPage(string slug);
}

public class DynamicPageService : IDynamicPageService
{
    private readonly AppDbContext _dbContext;

    public DynamicPageService(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public async Task<DynamicPageDto> GetValidPage(string slug)
    {
        // 查询数据库中是否存在对应slug的启用状态页面
        var page = await _dbContext.DynamicPages
            .FirstOrDefaultAsync(p => 
                p.Slug.Equals(slug, StringComparison.OrdinalIgnoreCase) 
                && p.IsActive);
        
        return page == null ? null : new DynamicPageDto 
        { 
            Content = page.Content 
        };
    }
}

public class DynamicPageDto
{
    public string Content { get; set; }
}

3. 路由优先级与404处理 #

• Blazor路由遵循先匹配明确路由，再匹配通配路由的规则，只要静态页面的@page指令先被注册（默认按项目文件编译顺序），就不会被动态路由拦截。
• 若需要统一404页面，可新建NotFound.razor并配置路由：

@page "/NotFound"

<h1>404 - 页面不存在</h1>
<p>请检查您输入的路径是否正确</p>

4. 可选：路由阶段前置校验（.NET 6+） #

如果想在路由匹配阶段就完成校验，避免组件初始化后再跳转，可使用IRouteConstraint：

public class DynamicPageConstraint : IRouteConstraint
{
    private readonly IDynamicPageService _pageService;

    public DynamicPageConstraint(IDynamicPageService pageService)
    {
        _pageService = pageService;
    }

    public async Task<bool> MatchAsync(HttpContext httpContext, IRouter route, string routeKey, RouteValueDictionary values, RouteDirection routeDirection)
    {
        if (values.TryGetValue("PageSlug", out var slugObj) && slugObj is string slug)
        {
            var validPage = await _pageService.GetValidPage(slug);
            return validPage != null;
        }
        return false;
    }
}

然后在Program.cs中注册约束并配置动态路由：

builder.Services.AddSingleton<DynamicPageConstraint>();

builder.Services.AddServerSideBlazor(options =>
{
    options.Routes.Add(new RouteEntry(
        "/{PageSlug}",
        typeof(DynamicPage),
        constraints: new { PageSlug = typeof(DynamicPageConstraint) }
    ));
});

这种方式下，无效的动态路径会直接触发NotFound流程，无需进入DynamicPage组件。

关键注意事项 #

• 路由顺序：确保静态页面组件的编译顺序在动态组件之前，避免静态路由被覆盖。
• 性能优化：对常用的动态页面slug做内存缓存，减少重复数据库查询。
• 大小写兼容：数据库查询时忽略大小写，避免因路径大小写差异导致匹配失败。

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