Vue Vue-router 中hash模式和history模式的关系

1 Vue-router

vue是单页面应用，实现了跳转页面(非手动输入url回车或刷新)时, 不向后端发出请求
实现这一功能的是Vue-Router

2 为了实现这一目的，Vue-Router提供了两种方式

hash —— 即地址栏 URL 中的 # 符号。比如这个 URL：http://www.abc.com/#/hello hash 的值为 #/hello。
hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，HTTP 请求总是http://www.abc.com/，因此改变 hash 不会重新加载页面。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

3 区别

手动输入url回车或刷新时

使用hash模式，但是后端无法获取到我#后面的url参数, 但永远不会404

使用history模式，可以获取参数，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少对 /book/id 的路由处理，将返回 404 错误

4 总结

对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。