history与hash的区别

路过的朋友，可以点个赞，关注一下~~~

前言

在vue-router中，对路由器的配置有两种模式，hash模式和history模式，

最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。

mode："hash" mode："history"

hash

即：地址栏 URL 中的 # 符号，比如这个 URL：www.aaa.com/#/hello，has… 的值为 #/hello。

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history

history利用了 HTML5中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

总结

通过history中，丢掉了#，但是：不怕前进，不怕后退，就怕刷新，刷新是实实在在地去请求服务器的。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。