历史路由和哈希的区别

相对于传统的哈希路由，我在网上收集了三个很棒的总结。

原则:

哈希值与url中的#相对应。其原理是通过hashChange()事件监控哈希值的变化，根据路由表对应的哈希值判断加载对应的路由和加载对应的组件。

优势:

1.只需要前端配置路由表，后端不参与。

缺点:

要检查浏览器是否支持历史，只需在控制台中输入历史。

原则:

历史使用浏览器的历史堆栈，包括back、forward、go和go方法，然后在HTML5中添加pushState()和replaceState()方法，提供修改历史的功能。但是在修改的时候，虽然当前的URL改变了，但是浏览器并不会立刻向后端发送请求。

优势:

1.符合url地址规范，不需要#，用起来更美观。

缺点:

1.当用户手动输入地址或刷新页面时，会发起url请求，后端需要配置index.html页面用户无法匹配静态资源的情况，否则会出现404错误。

2.兼容性很差，因为它使用了HTML5 History对象中新的pushState()和replaceState()方法，需要特定浏览器的支持。

个人觉得还是用hash比较好。毕竟用户不会关注url是什么样子的，哈希路由可以节省资源请求。而且除非一起写，否则前后端url不完全同步是必然的，vue-router默认也是hash模式。但是也有例外，比如根据权限生成不同的路由时使用历史模式。

最后推荐一个vue-router的源码分析。