介绍
Vue-router是Vue.js官方提供的路由管理器，它能够帮助我们构建单页面应用。Vue-router支持两种路由模式：hash模式和history模式。本篇博客将深入探讨这两种模式的实现原理。
hash模式
在hash模式中，URL中的hash部分（即#后面的内容）实际上不会被发送到服务器，而是完全由浏览器端控制。这种模式下，URL的改变不会触发页面的重新加载，通过监听hashchange事件，我们可以感知到URL的变化并做相应的处理。
Vue-router通过window.location.hash来获取当前URL中的hash值，并通过hashchange事件监听URL的变化。在Vue-router实例化过程中，会创建一个EventListener监听hashchange事件，当URL的hash值发生变化时，Vue-router将根据新的hash值来匹配对应的路由，并更新视图。
history模式
history模式通过浏览器的History API来实现，其中包括pushState、replaceState和popstate事件。
在history模式下，URL中的路径部分（即主机名之后的部分）可以被发送到服务器，因此在使用history模式时，需要服务器的配合。一般来说，服务器响应任何资源请求都返回同一个HTML文件，然后在前端使用Vue-router来根据URL的路径来匹配相应的路由。
当用户点击前进或后退按钮时，会触发popstate事件，Vue-router在初始化时会监听popstate事件，并对URL进行处理，以更新当前的路由和视图。
hash模式 vs history模式
两种模式各有优劣，具体选用哪种模式需根据实际需求来决定：
- hash模式简单易用，不需要服务器的支持。但是URL中会有
#符号，影响美观性。 - history模式更加友好，URL比较干净。但是需要服务器的配合，并且在开发环境下需要配置“后端”路由。
总结
Vue-router的两种模式实现原理分别基于浏览器的hashchange事件和History API，从而实现了单页面应用中的路由功能。选择哪种模式需要根据项目需求来决定，每种模式都有各自的优缺点。在实际项目中，可以根据具体情况来选择合适的模式，以提供更好的用户体验。
本文来自极简博客，作者：破碎星辰，转载请注明原文链接：Vue-router的两种模式实现原理
