history路由和hash路由的区别

history和hash路由的区别

1. 最直观的：

• hash模式会在地址栏中有#号，而history模式没有；同时由于history模式的实现用到H5的api，所以要求IE >= 10；
• 默认hash路由是不会像浏览器端发出请求的，主要一般是用于锚点; history中 go / back / forward以及浏览器中的前进和后退按钮一般都会向服务器端发起请求。
• hash路由不支持SSR，history路由支持

2. 实现原理

​ hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且监听popstate事件来实现的。history.pushState/replaceState不会触发onPopState事件，页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。

3. history模式特点

​ history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。