Blazor应用打开新标签页时URL出现重复路径段异常问题

问题成因 #

你触发跳转时传入的是不带前缀斜杠的相对路径folder/mypage，浏览器解析相对路径时会自动将其拼接在当前页面的父路径后。如果当前触发跳转的页面本身就处于/folder/路径下，就会出现路径段重复的问题。

解决方案 #

• 方案1：直接使用根路径 #

  给跳转路径添加开头的斜杠，强制浏览器从站点根目录开始解析路径，修改跳转代码为：

  await _jsRuntime.InvokeAsync<object>("open", "/folder/mypage", "_blank");
  

  该方案适合直接部署在站点根目录的Blazor应用。

• 方案2：通过NavigationManager拼接绝对路径（兼容性更好，支持子站点部署） #

  如果你的应用部署在站点子目录下，直接写根路径会丢失子目录前缀，可注入Blazor内置的NavigationManager处理路径：
  1. 先在对应组件中注入NavigationManager：

  @inject NavigationManager NavManager
  

  2. 跳转时通过ToAbsoluteUri方法生成符合当前站点配置的完整路径：

  var targetUrl = NavManager.ToAbsoluteUri("folder/mypage").ToString();
  await _jsRuntime.InvokeAsync<object>("open", targetUrl, "_blank");
  

• 额外排查项 #

  检查wwwroot/index.html（WebAssembly）或Pages/_Layout.cshtml（Server）中的<base href>配置是否和你的部署路径匹配，Blazor的路由解析依赖该标签的配置。

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