.NET 6服务端Blazor带参数路由刷新时资源加载异常

问题根源 #

刷新/empployee/{Page:int}这类带参数的路由时，浏览器会将当前路径视为/empployee/2，此时相对路径（比如Images/xyz.jpg）会被解析为/empployee/Images/xyz.jpg，但你的静态资源实际存放在网站根目录下，导致加载失败。

具体解决方案 #

1. 改用根相对路径（以/开头） #

修改所有静态资源的引用路径，确保从网站根目录开始定位：

• 调整MainLayout中的图片路径：

<img src="/Images/xyz.jpg" style="width:80px; display: inline;" class="rounded-pill  d-none d-sm-block">

• 检查_Host.cshtml中的CSS、JS引用，全部改为根相对路径：

<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<script src="/framework/blazor.server.js"></script>

2. 正确解析~/路径（可选） #

如果习惯用~/表示根目录，在Razor组件中需要通过@Url.Content解析：

<img src="@Url.Content("~/Images/xyz.jpg")" style="width:80px; display: inline;" class="rounded-pill  d-none d-sm-block">

注意：~/在Blazor组件中不会自动解析，只有在Razor页面（如_Host.cshtml）中才会直接生效。

3. 确保导航使用Blazor内置组件 #

页面内导航避免使用原生<a>标签，改用<NavLink>组件，它会通过Blazor的客户端路由跳转，不会触发全页面刷新，从根源减少此类问题：

<NavLink href="/empployee" Match="NavLinkMatch.All">员工列表</NavLink>
<NavLink href="/empployee/2">第二页</NavLink>

验证方法 #

修改后刷新/empployee/2页面，查看浏览器控制台的网络请求，确认静态资源的请求路径是/Images/xyz.jpg、/css/site.css等根路径下的资源，而非带路由前缀的错误路径。

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