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 应用时，浏览器将展示这些导航链接，并能够通过点击它们来在不同的页面之间导航。每个页面都会根据其路由来渲染相应的组件。

NavLinkMatch

有两个 NavLinkMatch 选项可分配给 <NavLink> 元素的 Match 属性：

NavLinkMatch.All：NavLink 在与当前整个 URL 匹配的情况下处于活动状态。
NavLinkMatch.Prefix（默认）：NavLink 在与当前 URL 的任何前缀匹配的情况下处于活动状态。

带参数的路由

路由允许我们根据不同的URL路径加载和显示不同的组件。Blazor提供了灵活的路由机制，包括支持带参数的路由，这对于构建动态内容的Web应用非常有用。
下面的代码定义了一个带有一个名为text的参数的路由：

@page "/route-parameter-1/{text}"

当访问形如/route-parameter-1/some-text的URL时，Blazor会加载这个组件，并将some-text作为参数传递给组件。

在组件中，我们可以通过定义一个与路由参数同名的公共属性来接收路由参数。这个属性需要加上[Parameter]特性标记，以告诉Blazor这是一个路由参数。
下面是一个简单的例子，展示了如何在组件中接收并显示路由参数：

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Text is required: @Text!</p>

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

在这个例子中，我们定义了一个名为Text的公共属性，并通过[Parameter]特性将其标记为路由参数。然后，在组件的Razor标记中，我们可以直接使用@Text来引用这个参数的值。
当路由参数发生变化时（例如用户通过浏览器导航到不同的URL），Blazor会自动更新组件的属性，并重新渲染组件。这意味着我们不需要编写任何额外的代码来处理路由参数的变化，只需在组件的Razor标记中正确地使用参数即可。

我们也可以将参数改为可选参数：

@page "/route-parameter-2/{text?}"

也可以为参数限制匹配类型：

@page "/route-parameter-with-limit/{id:int}/{option:bool?}"

也支持可跨多个文件夹边界捕获路径的 catch-all 路由参数：

@page "/catch-all/{*pageRoute}"

对于具有 /catch-all/{*pageRoute} 路由模板的 URL /catch-all/this/is/a/test，PageRoute 的值设置为 this/is/a/test。
对捕获路径的斜杠和段进行解码。 对于 /catch-all/{*pageRoute} 的路由模板，URL /catch-all/this/is/a%2Ftest%2A 会生成 this/is/a/test*。

注意事项

确保路由参数名在组件中唯一，以避免混淆。
如果路由参数是可选的，确保在组件代码中正确处理参数为空的情况。
如果需要对路由参数进行验证或转换，可以在组件的OnInitialized或OnParametersSet生命周期方法中进行。

带参数的路由是Blazor中构建动态内容的重要工具。通过定义带参数的路由和在组件中接收这些参数，我们可以根据URL的不同部分加载和显示不同的内容。这为我们创建灵活且用户友好的Web应用提供了强大的支持。

参考资料

ASP.NET Core Blazor 路由和导航

示例代码

RouteParameter.razor
RouteParameter2.razor
RouteParameterWithLimit.razor
RouteParameterCatchAll.razor