Blazor 路由怎么配置

Blazor的路由系统基于ASP.NET Core的路由机制实现，通过给组件添加路由特性或者使用路由组件，就可以实现页面跳转和路径匹配功能，支持静态路径、动态参数、路由约束等多种配置方式。

基础路由配置

Blazor中最常用的路由配置方式是在组件的@page指令中定义路由路径，这个指令需要放在组件文件的最顶部。当浏览器访问匹配的URL时，会自动渲染对应的组件。

下面是一个最基础的路由组件示例，定义了一个访问路径为/counter的页面：

@page "/counter"

<h3>计数器页面</h3>
<p>当前计数：@currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">点击加1</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

路由参数配置

如果需要在路由中传递参数，可以在@page路径中使用大括号包裹参数名，然后在组件的@code块中定义同名的属性，并添加[Parameter]特性即可接收参数。

下面示例定义了一个接收用户ID参数的路由，路径为/user/{userId}：

@page "/user/{userId}"

<h3>用户详情页</h3>
<p>当前用户ID：@UserId</p>

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

可选路由参数

如果要设置可选参数，可以在参数名后面添加问号，同时给对应的属性设置默认值。下面的示例定义了可选的文章ID参数，访问/article或者/article/123都可以匹配：

@page "/article/{articleId?}"

<h3>文章页面</h3>
@if (string.IsNullOrEmpty(ArticleId))
{
    <p>这是文章列表页</p>
}
else
{
    <p>当前文章ID：@ArticleId</p>
}

@code {
    [Parameter]
    public string ArticleId { get; set; } = "";
}

路由约束

Blazor支持对路由参数添加约束，限制参数的类型，只有符合约束的请求才会匹配到对应的组件。常见的约束类型有int、bool、datetime等，约束语法是在参数名后面添加冒号和约束类型。

下面示例限制文章ID必须是整数类型，访问/article/abc这类非整数的路径时不会匹配到该组件：

@page "/article/{articleId:int}"

<h3>文章详情页</h3>
<p>当前文章ID（整数）：@ArticleId</p>

@code {
    [Parameter]
    public int ArticleId { get; set; }
}

嵌套路由与路由跳转

Blazor支持嵌套路由配置，同时提供了NavigationManager服务来实现编程式的路由跳转。要在组件中支持嵌套路由，需要先添加Router组件相关配置，子路由可以在父组件的模板中定义。

下面是使用NavigationManager实现跳转的示例：

// 注入NavigationManager服务
[Inject]
public NavigationManager NavigationManager { get; set; }

// 跳转到计数器页面的方法
private void NavigateToCounter()
{
    NavigationManager.NavigateTo("/counter");
}

路由配置常见问题

• 路由路径必须以斜杠开头，否则无法正确匹配
• 同一个路径不能定义多个组件的@page特性，否则会出现路由冲突
• 路由参数属性必须添加[Parameter]特性，否则无法接收参数值
• 路由约束不匹配时，请求会返回404或者匹配到其他通配路由

Blazor路由配置ASP_NET_Core组件路由路由参数修改时间：2026-06-20 06:57:30