Vue-router 中hash模式和history模式的区别
Vue-router中hash模式和history模式的关系
在vue的路由配置中有mode选项最直观的区别就是在url中hash带了一个很丑的#而history是没有#的
mode:"hash";
mode:"history";
hash模式和history模式的不同
对于vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变视图的同时不会向后端发出请求。
为了达到这一目的，浏览器当前提供了以下两种支持：
- hash——即地址栏URL中的#符号（此hash不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello，hash的值为#/hello。它的特点在于：hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
- history——利用了HTML5HistoryInterface中新增的pushState()和replaceState()方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。
- 因此可以说，hash模式和history模式都属于浏览器自身的特性，Vue-Router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.
使用场景
一般场景下，hash和history都可以，除非你更在意颜值，#符号夹杂在URL里看起来确实有些不太美丽。
如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面。
另外，根据MozillaDevelopNetwork的介绍，调用history.pushState()相比于直接修改hash，存在以下优势:
- pushState()设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，因此只能设置与当前URL同文档的URL；
- pushState()设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
- pushState()通过stateObject参数可以添加任意类型的数据到记录中；而hash只可添加短字符串；
- pushState()可额外设置title属性供后续使用。
当然啦，history也不是样样都好。SPA虽然在浏览器里游刃有余，但真要通过URL向后端发起HTTP请求时，两者的差异就来了。尤其在用户手动输入URL后回车，或者刷新（重启）浏览器的时候。
个人在接入微信的一个活动开发过程中开始使用的hash模式，但是后面后端无法获取到我#后面的url参数，于是就把参数写在#前面，但是讨论后还是决定去掉这个巨丑的#
于是乎改用history模式，但是开始跑流程的时候是没问题，但是后来发现跳转后刷新或者回跳，会报一个404的错误，找不到指定的路由,最后后端去指向正确的路由加了/hd/xxx去匹配是否有这个/hd/{:path}才得以解决
总结
1hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
2history模式下，前端的URL必须和实际向后端发起请求的URL一致，如http://www.abc.com/book/id。如果后端缺少对/book/id的路由处理，将返回404错误。Vue-Router官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。”
3结合自身例子，对于一般的Vue+Vue-Router+Webpack+XXX形式的Web开发场景，用history模式即可，只需在后端（Apache或Nginx）进行简单的路由配置，同时搭配前端路由的404页面支持。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。