能否在Blazor中实现导航拦截？Blazor Server Side下重写导航JS的可行性

是否可以在Blazor中实现导航拦截、阻止跳转 #

完全可以实现，针对页面存在未保存更改等需要阻断导航的场景，既有Blazor框架原生提供的低侵入实现方案，也支持通过自定义JS扩展底层逻辑完成更细粒度的拦截，覆盖绝大多数业务场景需求。

Blazor Server 实现导航的底层JS逻辑 #

Blazor Server 的SPA导航体系，本质就是依托浏览器原生 History API 完成所有地址变更和路由匹配动作：

• 所有客户端触发的导航（包括用户点击内置路由链接、代码调用跳转方法），最终都会调用类似 window.history.pushState()、window.history.replaceState() 的原生JS方法完成地址栏更新，再通过SignalR同步路由变更给服务端做组件匹配
• 框架内置的JS逻辑会默认拦截页面内 <a> 标签的原生跳转行为，把同域路由的导航从整页刷新转换为SPA无刷新跳转，不会触发浏览器的重新加载流程
• 你感知到的“服务端触发导航”并不是服务端直接操作浏览器，本质是服务端通过SignalR把目标地址发给客户端的内置JS导航模块，再由JS调用浏览器原生API完成动作
• 这套底层导航JS逻辑没有做封闭封装，开发者完全可以根据业务需求对其进行重写、扩展，不需要改动Blazor框架的核心文件。

常见导航拦截的实现路径 #

框架原生拦截（覆盖Blazor体系内所有导航） #

从.NET 6 开始，Blazor 直接内置了位置变更拦截API，不需要编写自定义JS即可完成大部分场景的拦截：

• 注入 NavigationManager 服务，通过其提供的 RegisterLocationChangingHandler 方法注册自定义导航校验逻辑
• 在校验逻辑中读取当前页面的状态（比如是否存在未保存的表单更改），如果需要阻断导航，直接调用 LocationChangingContext 暴露的 PreventNavigation() 方法，即可终止本次导航流程，停留在当前页面
• 这套机制可以拦截所有Blazor体系内的导航请求，包括程序内调用 NavigateTo 方法触发的跳转、用户点击应用内导航链接触发的跳转。

自定义JS扩展（覆盖框架内置拦截的盲区） #

如果需要拦截不在Blazor路由体系内的导航行为（比如手动修改地址栏、点击外部链接触发整页刷新、触发浏览器关闭/刷新动作等），可以直接通过自定义JS扩展浏览器原生逻辑：

• 重写全局的 window.history.pushState、window.history.replaceState 方法，在方法执行前插入自定义校验逻辑，发现需要阻断导航时直接终止方法执行
• 监听浏览器原生的 beforeunload 事件，在用户触发整页刷新、关闭标签页操作时弹出未保存提示，阻断默认的离开行为
• 这类自定义JS只需要在应用根组件初始化之前注入页面即可生效，和传统SPA应用的拦截逻辑完全通用。

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