Blazor如何实现无服务器交互修改浏览器地址栏完成路由导航？

你要检索学习的对应JavaScript技术是 HTML5 History API，这是浏览器原生提供的标准前端能力，Blazor的无刷新导航完全基于这套接口实现，具体逻辑如下：

• Blazor应用启动后会全局注册<a>标签的点击拦截逻辑：所有指向本站同域路径的锚点标签被点击时，脚本会直接调用event.preventDefault()阻止浏览器默认的跳转行为——默认行为就是点击链接后向服务器发起HTTP GET请求拉取整页新内容的逻辑，这一步被拦截后自然不会产生对应的GET请求。
• 拦截到合法的站内导航意图后，Blazor会调用History API提供的history.pushState()/history.replaceState()方法，直接在前端修改地址栏显示的URL路径，这个操作本身不会触发页面刷新，也不会产生网络请求。
• 同时Blazor会常驻监听浏览器的popstate事件，这个事件会在用户点击浏览器前进、后退按钮时触发，监听到路由变化后，Blazor路由系统会直接在前端匹配已经注册的组件路由，把对应页面内容渲染替换到路由出口位置，全程不需要服务器返回新的HTML文档。

补充说明：Blazor WebAssembly和Blazor Server两种托管模式的客户端路由拦截逻辑完全一致，二者的区别仅在于路由匹配后的组件渲染是在浏览器本地执行，还是通过SignalR连接交由服务端执行后回传差异更新，两种模式下切换路由都不会触发整页GET请求。

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