Vue-router中hash模式和history模式的关系。最直观的区别就是vue的路由配置中有一个mode选项。最直观的区别是url中的hash带Anugly#andhistoryiswithout#mode:"hash";需要引入前端路由系统，也就是Vue-Router的意思。前端路由的核心在于——在不向后端发送请求的情况下改变视图。为了实现这一目标，浏览器目前提供了以下两种类型的支持：散列——即地址栏中URL中的#符号（这个散列不是密码学中的散列运算）。比如这个网址：http://www.abc.com/#/hello，哈希值为#/hello。它的特点是虽然hash出现在URL中，但不会包含在HTTP请求中，对后端完全没有影响，所以更改hash不会重新加载页面。history-在HTML5历史接口中使用新的pushState()和replaceState()方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史栈。在已有的back、forward、go的基础上，提供了修改历史的功能。只是当他们进行修改的时候，虽然改变了当前的URL，但是浏览器并不会立即向后端发送请求。因此，可以说hash模式和history模式都属于浏览器自身的特性，而Vue-Router正是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。一般场景下，hash和history都可以，除非你比较在意外观，否则混在URL中的#符号看起来不是很美观。如果不想要难看的hash，我们可以使用路由历史模式，它充分利用了history.pushStateAPI，可以在不重新加载页面的情况下完成URL跳转。Vue-router另外，根据Mozilla开发网的介绍，调用history.pushState()与直接修改hash相比有以下优势：pushState()设置的新URL可以是任意与当前同源的URL网址；whilehashonly可以修改#后面的部分，所以只能设置同一个文档的url为当前url；pushState()设置的新URL可以与当前URL完全相同，这也会将记录添加到堆栈中；并且hash设置的新值必须与相同，结果触发添加记录入栈的动作是不同的；pushState()可以通过stateObject参数向记录中添加任意类型的数据；而hash只能加短字符串；pushState()可以额外设置title属性，方便后续使用。当然，历史并不是万事大吉。SPA虽然在浏览器中使用起来很方便，但是当真正需要通过URL向后端发起HTTP请求时，两者的区别就来了。尤其是当用户手动输入URL并回车，或者刷新（重启）浏览器时。我个人是在开发一个连接微信的activity的时候开始使用hash方式的，但是后台拿不到我#后面的url参数，所以我把参数写在了#前面，但是经过讨论，我还是决定去掉这个丑一个#于是我切换到history模式，但是开始运行进程的时候没有问题，后来发现跳转之后会刷新或者跳回，会报404错误，指定路由找不到，最后后端指向正确的在route中添加/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页面，这是您的应用所依赖的页面。”3结合自己的例子，对于一般的Vue+Vue-Router+Webpack+XXX形式的Web开发场景，可以使用history模式，只需要在后端（Apache或者Nginx）做简单的路由配置，以及前端路由的404页面支持也匹配。
