如何在Blazor WebAssembly中让NavLink使用相对URL？

下面是几种无需手动给每个链接添加前缀的解决方案：

方法1：用NavigationManager动态生成相对路径 #

在组件中注入NavigationManager，通过它获取当前路径并拼接目标链接，避免手动维护前缀：

@inject NavigationManager NavManager

@* 菜单链接使用这个方法生成路径 *@
<a href="@GetRelativeUrl("games")">游戏</a>

@code {
    private string GetRelativeUrl(string targetPath)
    {
        // 从当前Uri中提取基地址之后的路径部分
        var currentRelativePath = NavManager.Uri.Substring(NavManager.BaseUri.Length);
        
        // 处理当前路径不是目录的情况（比如当前在/demo/detail，需要回到/demo）
        if (!currentRelativePath.EndsWith("/"))
        {
            currentRelativePath = System.IO.Path.GetDirectoryName(currentRelativePath) ?? string.Empty;
        }

        // 拼接路径并去除重复的斜杠
        return $"{currentRelativePath}/{targetPath}".Replace("//", "/");
    }
}

方法2：使用NavLink组件自动解析相对路径 #

Blazor的NavLink组件会自动基于当前路由上下文解析相对路径，只要你不给href加开头的斜杠：

<NavLink href="games" Match="NavLinkMatch.Prefix">游戏</NavLink>

当你在/demo/页面时，点击这个链接会自动跳转到/demo/games，无需手动拼接前缀。

方法3：全局配置基地址（适用于部署在子路径的场景） #

如果你的整个应用部署在/demo/子路径下，直接修改wwwroot/index.html中的<base>标签：

<base href="/demo/" />

之后所有不带开头斜杠的相对路径都会自动基于这个基地址跳转，比如href="games"会直接指向/demo/games。

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