Blazor 路由和导航

在 Blazor 中，路由和导航是通过 @page 指令和 NavLink 组件来实现的。下面是一个简单的 Blazor 路由和导航的代码例子。

定义路由我们可以通过在 Razor 组件文件的顶部使用 @page 指令来完成。我们创建三个页面：Index.razor、Counter.razor 和 FetchData.razor。

Index.razor

@page "/"  
  
<h1>Hello, world!</h1>  
  
<NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>  
<NavLink href="counter">Counter</NavLink>  
<NavLink href="fetchdata">Fetch data</NavLink>

Counter.razor

@page "/counter"  
  
<h1>Counter</h1>  
  
<p>Current count: @currentCount</p>  
  
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>  
  
@code {  
    private int currentCount = 0;  
  
    private void IncrementCount()  
    {  
        currentCount++;  
    }  
}

FetchData.razor

@page "/fetchdata"  
  
<h1>fetch data</h1>  

在上面的代码中，每个组件的顶部都有一个 @page 指令，它定义了该组件的路由。例如，Index.razor 的路由是 "/"，Counter.razor 的路由是 "/counter"，而 FetchData.razor 的路由是 "/fetchdata"。

接下来，我们使用 NavLink 组件来创建导航链接。NavLink 组件是一个特殊的 a 标签，它会根据当前路由是否匹配 href 属性来自动添加或删除 CSS 类（通常是 active），从而高亮显示当前活动的导航链接。

在 Index.razor 文件中，我们添加了三个 NavLink 组件，分别对应三个页面。Match="NavLinkMatch.All" 表示当路由完全匹配时（即没有额外的路径片段）才将链接视为活动链接。如果我们想要更宽松的匹配（例如，当路径以特定字符串开始时），我们可以使用其他 NavLinkMatch 值。

现在，当运行 Blazor 应用时，浏览器将展示这些导航链接，并能够通过点击它们来在不同的页面之间导航。每个页面都会根据其路由来渲染相应的组件。