其他

路由

• history
• hash

history

API 简介：

• window.history.length 当前会话浏览过的页面数量
• window.history.go(?delta) 根据参数在历史记录中移动
• window.history.back() 上一页 等于 window.history.go(-1)
• window.history.forward() 下一页 等于 window.history.go(1)
• window.history.pushState(data, title, ?url) 添加一条浏览记录
• window.history.replaceState(data, title, ?url) 修改一条浏览记录

HTML5 的 History API 为浏览器的全局 history 对象增加了该扩展方法。它是一个浏览器的一个接口，在 window 对象中提供了 onpopstate 事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。提供了如下事件：

window.addEventListener("popstate", function(e) {
  console.log(e);
});

调用 go back forward pushState replaceState 均会触发上面的事件，并且浏览器的 url 地址也会跟着改变。只会改变 url 地址，且不会重新刷新页面。

hash

hash路由模式是这样的：http://xxx.abc.com/#/xx。 有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。比如我们可以如下简单的监听：

window.addEventListener('hashchange', (e) {
  // location.hash
});

改变hash不会触发页面跳转，因为hash链接是当前页面中的某个片段，所以如果hash有变化，那么页面将会滚动到hash所连接的位置。但是页面中如果不存在hash对应的片段，则没有任何效果。比如 a链接。这和 window.history.pushState方法类似，都是不刷新页面的情况下更改url。

hash与pushState对比

1. hash只能修改url的片段标识符的部分。并且必须从#号开始，但是pushState且能修改路径、查询参数和片段标识符。pushState比hash更符合前端路由的访问方式，更加优雅(因为不带#号)。

2. hash必须和原先的值不同，才能新增会话浏览历史的记录，但是pushState可以新增相同的url的记录

不管我们是通过location接口直接改变hash值，还是我们通过history直接前进或后退操作(改变hash变化)，我们都可以看到都能通过 hashchange该事件进行监听到url hash的改变。并且不会刷新页面。