2018-08-23 从Vue-Router的Hash说起的URL相关知识

最近被问到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等关键知识进行一下总结，先插个旗。