通过Hash实现前端路由

hash 介绍

https://xxx/xxx/xxx.html#look

代表网页中的一个位置。浏览器读取这个URL后，会自动将#后面的标识符的位置滚动至可视区域。

可通过下面的方法，为网页位置指定标识符。

• 使用锚点，
• 使用id属性，

  。

# 的一些特性

1. # 是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。
2. 改变#，网页不会刷新
3. 改变#会改变浏览器的访问历史

读取 # 值

通过 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){...};
• window.addEventListener("hashchange"，function(event){...}, false);

对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

hash的优缺点

优点:

1. 只需要前端配置路由表, 不需要后端的参与
2. 兼容性好, 浏览器都能支持
3. hash值改变不会向后端发送请求, 完全属于前端路由

缺点:

1. hash值前面需要加#, 不符合url规范,也不美观
2. 服务器端无法准确跟踪前端路由信息
3. 与锚点定位元素的功能冲突