两种模式
在vue中，路由router可以有两种模式可选：hash和history。设置方式就是设置Router的mode属性，如下：
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ // mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) 复制代码
Vue中默认是hash模式，所以不需要设置mode；如果想使用history模式，只需要将mode设置为‘history’即可。
下面简单看看两者的不同：
- 如果使用的是hash模式，url中就会存在“#“符号，这个符号后面的是路径。
比如我们访问http://localhost:8080/ ，会看到浏览器自动添加成http://localhost:8080/#/
如果我们要访问"/test"路径，则url为http://localhost:8080/#/test ，而http://localhost:8080/test 不可以
- 如果使用的是history模式，则url没有“#“符号，路径与传统网址一样，如http://localhost:8080/ 和 http://localhost:8080/test
但是这只是表面现象，这两种模式本质的区别是什么？
history模式
要理解hash模式，就先要知道history模式，因为hash模式是解决问题出现，知道问题是什么就很容易理解hash模式。
history模式就是我们传统的路径，url中的路径就是服务端根目录下的相对路径，是真实路径。
比如http://localhost:8080/test/123.html ，则就需要在根目录下有test文件夹，文件夹下有123.html这个文件。
但是如果我们没有这个文件，而是用vue这种router的方式呢？
那么就必须用nginx代理，否则找不到这个文件就是返回404。
这样就需要在nginx中配置每一个route，漏下一个就会404
所以history模式下的路由分发是服务端（nginx）来做的
hash模式
为了解决上面的问题，hash模式出现了。在hash模式的url中“#“符号后面的路径并不是真实路径，而是以类似参数的形式传给默认文件。
默认文件就是index，在这里通过“#“符号后面的路径去匹配路由处理，所以只要有index这一个文件是真实路径就可以。
这样就不需要在nginx一个个配置了。
这样hash模式下的路由分发就不需要服务端来做了，直接在前端就处理了。
当然相对于hash模式，history模式也有优势，根据 Mozilla Develop Network 的介绍，调用 history.pushState() 相比于直接修改 hash，存在以下优势:
pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
pushState() 可额外设置 title 属性供后续使用。
