Blazor 组件 导航条

在Blazor应用程序中，NavLink 组件是构建导航菜单和侧边栏的核心组件。它允许用户通过点击链接来导航到应用程序的不同部分，同时提供视觉反馈，显示当前激活的链接。
下面是一个简单的Blazor导航条示例，使用了NavLink组件。

首先，我们创建一个新的Razor组件，用于表示导航条。

@page "/nav-example"
@rendermode @(new InteractiveServerRenderMode(prerender: true))

<nav >
    <div>
        <NavLink href="use-custom-component">
            <span aria-hidden="true"></span>custom component
        </NavLink>
    </div>

    <!-- 其他NavLink -->
</nav>

@code {

}

在上面的示例中，我们定义了一个导航条，它包含了一系列的NavLink组件。每个NavLink组件都对应一个不同的路由地址，当用户点击这些链接时，Blazor应用程序会导航到相应的页面或组件。

@page "/nav-example"指令指定了这个组件对应的URL路径，即当用户访问/nav-example时，会渲染这个导航条组件。

@rendermode @(new InteractiveServerRenderMode(prerender: true))允许我们在服务器端预渲染这个组件，这样可以提高首屏加载的性能。

在NavLink组件中，我们使用了href属性来指定链接的目标地址。<span aria-hidden="true"></span>是一个空白的占位符，这里原本可以放置一些图标或装饰性的内容，但在这个例子中我们将其留空。aria-hidden="true"确保这些元素对屏幕阅读器等辅助技术是不可见的。

在@code块中，我们没有添加任何代码，因为NavLink组件已经包含了处理导航所需的逻辑。当用户点击链接时，Blazor会自动处理路由导航。

最后，为了将这个导航条集成到应用程序中，我们需要在应用的布局文件或特定的页面中引入这个组件。这样，无论用户访问哪个页面，导航条都会显示在页面顶部或侧边，提供一致的导航体验。

示例代码

NavExample.razor