前端两个路由模式的原理和区别

前端路由机制的核心原理是什么？两种不同的路由实现方式之间存在哪些差异？

一般比较分析

前端路由技术主要应用于SPA（单页面应用）开发项目中，能够在不进行页面刷新的前提下，依据不同的URL展示对应的组件或内容。

1.hash模式

例如，www.test.com/#/ 即为Hash URL。当#符号后方的哈希值发生变动时，可以通过监听hashchange事件来捕捉URL的变化，并据此实现页面跳转。值得注意的是，无论哈希值如何变化，服务器接收到的请求始终为www.test.com。相较于其他方式，Hash模式在实现上更为简便，并且具备更优的兼容性。每次对#后部分内容进行修改时，浏览器的历史记录中都会新增一条记录。用户通过点击“后退”按钮即可返回至前一个浏览位置。

2.history模式

History模式是HTML5引入的新特性，主要依赖于history.pushState和history.replaceState这两个API来实现URL的修改。借助History模式调整URL同样不会触发页面刷新操作，仅会更新浏览器的历史记录条目。当用户执行浏览器相关操作（如点击“后退”按钮）时，则会触发popState事件。

popstate 事件 当用户通过点击浏览器中的「前进」或「后退」按钮进行导航时，将引发popstate事件的发生。开发者可以监听该事件并作