Blazor Server模板：如何让指定URL页面不显示NavMenu导航菜单？

当然可以通过特定路由避开MainLayout.razor，也能在现有布局里动态控制NavMenu的显示，两种方案都能满足需求，具体如下：

方案一：给目标页面指定独立布局（彻底避开MainLayout） #

这种方法最直接，给不需要显示NavMenu的页面单独配置一个不含导航栏的布局：

1. 创建空布局组件
   在项目中新建EmptyLayout.razor文件，内容只保留页面主体渲染部分：

   @inherits LayoutComponentBase
   
   <div class="main">
       <div class="content px-4">
           @Body
       </div>
   </div>
   

2. 在目标页面指定使用该布局
   在需要隐藏NavMenu的Razor页面顶部，添加@layout指令绑定空布局：

   @page "/no-nav-page"
   @layout EmptyLayout
   
   <h3>这个页面不会显示左侧导航菜单</h3>
   

   访问/no-nav-page时，页面会使用EmptyLayout，自然不会加载NavMenu组件。

方案二：在MainLayout中动态控制NavMenu的显示 #

如果不想新增布局组件，可直接在MainLayout.razor里根据当前路由判断是否渲染NavMenu：

1. 注入NavigationManager
   在MainLayout.razor顶部注入路由管理对象，用于获取当前路由信息：

   @inject NavigationManager NavigationManager
   @inherits LayoutComponentBase
   

2. 添加路由判断逻辑
   修改NavMenu的渲染条件，比如当路由是/no-nav-page时隐藏导航栏：

   <div class="page">
       <div class="sidebar">
           @* 仅当当前路由不是目标路由时，渲染NavMenu *@
           @if (!NavigationManager.ToBaseRelativePath(NavigationManager.Uri).Equals("no-nav-page"))
           {
               <NavMenu />
           }
       </div>
   
       <main>
           <div class="top-row px-4">
               <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
           </div>
   
           <article class="content px-4">
               @Body
           </article>
       </main>
   </div>
   

   这种方式无需修改页面布局配置，直接在主布局内做条件渲染即可。

两种方案各有优劣：方案一更彻底，适合完全不需要主布局结构的页面；方案二更灵活，适合仅隐藏导航栏但保留主布局其他元素（如顶部栏）的场景。

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