Vue修改地址栏URL后如何阻止浏览器向服务端发送请求？

Vue Router拦截URL跳转请求的实现原理 #

Vue Router不会触发浏览器向服务端发请求的核心逻辑，和你配置的mode参数直接相关，底层依赖浏览器原生提供的API实现：

• history模式（你示例代码中使用的模式）
  底层基于HTML5新增的History接口实现，核心是history.pushState()和history.replaceState()两个方法。这两个原生方法支持直接修改浏览器的历史栈记录、更新地址栏的URL，但本身设计就不会触发浏览器向服务端发起页面资源请求。
  调用this.$router.push时，Vue Router内部会先调用pushState修改地址栏URL，再根据新URL匹配本地路由表，找到对应的组件渲染到页面中，全程不需要和服务端交互。同时Vue Router会监听浏览器的popstate事件，捕获用户点击前进/后退按钮的操作，自动执行对应的组件更新逻辑。
• hash模式（Vue Router的默认模式）
  底层依赖URL的哈希片段（也就是#后面的内容）实现，浏览器原生规则里，哈希片段是用来做页面内锚点定位的，修改哈希值永远不会触发浏览器向服务端发请求。Vue Router会监听hashchange事件，感知哈希值变更后匹配路由表更新组件，也不会触发页面重载。

另外Vue Router提供的<router-link>组件，本质是渲染原生<a>标签，但内部会阻止<a>标签的默认跳转行为，替换成上面的路由切换逻辑，所以点击路由链接也不会触发服务端请求。

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