利用url中的hash来实现页面的跳转

利用url中的hash来实现页面的跳转

1. 使用hash

有时会看到有些网页的url上会有#这种符号，当时我没怎么在意，后来学vue的路由时候，都会看见这个#，#和#后面的字符串就是url的hash值，可以通过这个hash来进行页面的跳转。

获取url中的hash：http://www.bbbb.com#hashstr

window.location.hash //#hashstr

改变hash：

window.location.hash = "#hahah";
// 变成http://www.bbbb.com#hahah

最重要的是hashchange事件，通过这个事件来写页面跳转等的业务逻辑，每当url的hash改变都会触发这个事件

window.addEventListener("hashchange", function() {
    // 获取hash值
    var hash = window.location.hash;

    // 根据获取的hash做相应的操作
    . . .
});

这种有很多下拉列表，每个条目对应不同的静态页面，可以使用hash，每个条目设定不一样的hash值，点击条目就改变hash值，触发hashchange事件，这样就可以实现在一个页面中进行不同页面的跳转。浏览器前进后退也没问题。
**要注意的是：这种方法浏览器直接刷新是会有问题的，页面调到最开始的页面，但是url不会改变。

还有一种是使用HTML5 history api，这方法是比较强大的。有两个方法和一个事件

history.pushState(stateObject, title, url)
history.replaceState(stateObject, title, url)
window.onpopstate事件

两个方法：
第1个参数是状态对象，它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。

第2个参数是标题，是一个字符串，目前各类浏览器都会忽略它（以后才有可能启用，用作页面标题），所以设置成什么都没关系。目前建议设置为空字符串。

第3个参数是URL地址，一般会是简单的?page=2这样的参数风格的相对路径，它会自动以当前URL为基准。需要注意的是，本参数URL需要和当前页面URL同源，否则会抛出错误。

调用pushState()方法将新生成一条历史记录，方便用浏览器的“后退”和“前进”来导航（“后退”可是相当常用的按钮）。另外，从URL的同源策略可以看出，HTML5 history API的出发点是很明确的，就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时，站点可以直接加载到对应的状态。
history.replaceState()不会新生成历史记录，而是将当前历史记录替换掉。

popstate事件是设计出来和前面的2个方法搭配使用的。一般只有在通过前面2个方法设置了同一站点的多条历史记录，并在其之间导航（前进或后退）时，才会触发这个事件。同时，前面2个方法所设置的状态对象（第1个参数），也会在这个时候通过事件的event.state返还回来。

HTML history api 可以结合ajax实现翻页，我也没有写过实例，只是在学AngularJs路由的时候看到的，我是参考这个博客的