最近被问到VueRouter的两种模式的区别，答：Hash模式url上有#号，History模式url上没有#。完！
也不知道这么回答对不对，就看了看资料，发现也就是这个意思吧！
Vue-Router中有两种URL模式，一个是Hash(默认)，一个是History模式。
const router = new VueRouter({
mode: 'history',
routes: [{...}]
})
History模式需要后台设置，具体设置请看文档
说说这个#的是什么
1. #的含义
#（Hash）代表网页中的一个位置，右边就是该位置的标识符，2010年twitter第一次将#用到URL中，（这是主流网站第一次大规模的使用），比如：http://www.example.com/index.html#print 就代表网页中index.html的print位置。浏览器读取这个URL后会自动将页面滚动到print这个标识符的位置，在html中指定标识符的方法有两种：
1.使用锚点 <a name="print"></a>
2.使用id属性<div id="print"></div>
2. http请求完全忽略 #
#是用来指示浏览器的动作，对服务器完全无用，所以http请求中没有#，比如访http://www.example.com/index.html#print
GET index.html HTTP/1.1
Host: www.example.com //#print完全被忽略
由于请求将#后的字符完全忽略，但是可以将#转义为%23
例如：http://www.example.com/index.html?color=#fff 改为 http://www.example.com/index.html?color=%23fff
GET index.html?color
GET index.html?color=#fff //转义后
Host: www.example.com
3. 修改#后面的url不会触发网页加载
比如：http://www.example.com/index.html#location1 改为 http://www.example.com/index.html#lcoation2
浏览器不会发起任何请求。
4. 但是改变#会改变浏览器的访问历史
每改变一次#后面的，都会在浏览器的访问历史中增加一个记录，使用倒退按钮可以返回，前进等。这对于Ajax应用程序特别有用，
用不同的#值，代表不同的访问状态，对ie6/7没用，他们不会应为#后的变化而增加历史记录。
5. window.location.hash读取#值
window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。
6. onhashchange事件
onhashchange是一个HTML5新增的事件，hash变化时就会触发这个事件
三种事件监听方式：
window.onhashchange = foo
<div onhashchange="foo()">
window.addEventlistener('hashchange',foo,false)
不支持该事件的浏览器可以用setInterval监控location.hash的变化
7. google抓取#的机制
默认情况下google爬虫会忽略URL的#部分，但是如果你希望，Ajax生成的内容可以被爬虫读取，name可以使用#!
google会自动将后面的内容转化成查询字符串_escaped_fragment_的值，即#!被?_escaped_fragment_=替换
http://twitter.com/#!/username //转化为
http://twitter.com/?_escaped_fragment_=/username
总结
对URL中的# （Hash）对照阮一峰老师的博客 做了个简单总结，后期要对history等关键知识进行一下总结，先插个旗。