Blazor如何解析带@page指令的嵌套组件？@page是否生效？

核心结论 #

带@page指令的组件被作为子组件嵌套使用时，组件上的@page指令会被完全忽略，不会触发任何路由相关逻辑。

具体解析规则 #

• @page指令的作用仅为路由注册：Blazor应用启动时，会扫描所有声明了@page的组件，将指令中配置的路由模板和对应组件类型做绑定。只有当用户访问的URL匹配到对应路由模板时，路由系统才会将该组件作为根页面组件，渲染到布局的@Body占位符中。
• 标签式嵌套调用不触发路由逻辑：当你在其他Razor组件内部通过组件标签（比如示例中的<Counter />）引用组件时，Blazor的组件渲染管线不会读取被引用组件上的@page配置，只会将其作为普通可复用组件处理：按照标准组件生命周期完成初始化、参数接收、UI渲染、事件响应，和没有声明@page的普通复用组件表现完全一致。
• 两种使用场景互不冲突：同一个组件既可以声明一个或多个@page指令作为可路由页面使用，也可以同时作为子组件被任意其他组件嵌套引用，两种用法不会互相干扰。比如示例中的Counter组件，既可以通过访问/counter路径作为独立页面打开，也可以在任意组件中通过<Counter />标签嵌入使用，组件本身的UI、交互逻辑、状态表现完全一致，仅渲染入口不同。

你给出的示例代码是完全合法的可运行代码：访问站点根路径/时，Index组件作为路由匹配到的根页面渲染，内部嵌套的Counter组件会正常展示计数区域、响应点击计数事件，既不会触发路由跳转，也不会和/counter的独立路由产生冲突。

示例Counter组件代码 #

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;  
        
    private void IncrementCount()
    {
        currentCount ++;
    }
}

上述代码中@page "/counter"行仅在路由匹配场景生效，作为子组件嵌套时这行配置不会参与渲染逻辑。

示例Index组件代码 #

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter />

上述代码中直接嵌套<Counter />的写法是Blazor官方推荐的组件复用方式，不存在任何副作用。

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