hash 介绍
https://xxx/xxx/xxx.html#look
代表网页中的一个位置。浏览器读取这个URL后，会自动将#后面的标识符的位置滚动至可视区域。
可通过下面的方法，为网页位置指定标识符。
- 使用锚点，
<a name="look"></a> - 使用id属性，
<p id="look">。
# 的一些特性
- # 是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。
- 改变#，网页不会刷新
- 改变#会改变浏览器的访问历史
读取 # 值
通过 window.location.hash 读取#值，同时也可以通过 window.location.hash 设置 # 值 ，同时产生一条历史记录。
通过Hash实现前端路由
路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。根据上述，hash 的特点，可以通过 Hash实现前端路由。
hashchange 是可以监听到的，我们可以在监听事件的回调函数中，展示和隐藏不同UI显示的功能，从而实现前端路由。
onhashchange事件
这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
它的使用方法有三种：
- window.onhashchange = function(event){...};
<div onhashchange="func();">- window.addEventListener("hashchange"，function(event){...}, false);
对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。
hash的优缺点
优点:
- 只需要前端配置路由表, 不需要后端的参与
- 兼容性好, 浏览器都能支持
- hash值改变不会向后端发送请求, 完全属于前端路由
缺点:
- hash值前面需要加#, 不符合url规范,也不美观
- 服务器端无法准确跟踪前端路由信息
- 与锚点定位元素的功能冲突
