Blazor WASM中如何链接至其他Razor页面并携带查询字符串参数？

在Blazor WASM里，确实有比手动拼接URL更简洁的方式生成路由链接，主要有以下两种方案：

1. 使用NavLink组件（推荐） #

Blazor自带的NavLink组件是专门为路由链接设计的，它会自动处理路由匹配状态，比原生<a>标签更适配Blazor的路由体系。你可以通过它便捷传递查询字符串：

@foreach (var link in RecordLinks)
{
    <NavLink href="@($"documentation/ViewRecord?recordtype={link.Word}")" Match="NavLinkMatch.Prefix">
        @link.DisplayText
    </NavLink>
}

@code {
    private List<RecordLink> RecordLinks = new List<RecordLink>
    {
        new RecordLink { Word = "randomWord1", DisplayText = "link1" },
        new RecordLink { Word = "randomWord2", DisplayText = "link2" },
        new RecordLink { Word = "randomWord3", DisplayText = "link3" }
    };

    private class RecordLink
    {
        public string Word { get; set; }
        public string DisplayText { get; set; }
    }
}

如果把ViewRecord.razor的路由改成支持直接绑定参数的形式（@page "/documentation/ViewRecord/{recordtype}"），写法还能更简化：

<NavLink href="@($"documentation/ViewRecord/{link.Word}")">@link.DisplayText</NavLink>

2. 注入NavigationManager生成URL #

如果需要在代码逻辑里生成URL，可注入NavigationManager，用它的GetUriWithQueryParameters方法拼接查询字符串，能自动处理URL编码，避免手动拼接的错误：

@inject NavigationManager NavManager

@foreach (var link in RecordLinks)
{
    var url = NavManager.GetUriWithQueryParameters(
        NavManager.ToAbsoluteUri("documentation/ViewRecord").AbsolutePath,
        new Dictionary<string, object> { { "recordtype", link.Word } }
    );
    <a href="@url">@link.DisplayText</a>
}

注意：你的DocumentationController在Blazor WASM客户端路由场景下用不上，WASM是纯客户端路由机制，生成客户端路由链接不需要依赖控制器。

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