单页应用跳转实现浅析-demo篇

说道单页应用，首先要考虑到两个问题，即：怎样跳转，如何捕获。

怎样跳转？

在单页应用中跳转方式大概如下：

pushState 、 replacestate 这两个方法 和 location.href 、location.hash 两个属性。如何捕获？在单页应用中捕获页面跳转是很有必要的，因为实际上页面没有被刷新，只能通过事件捕获来触发展现内容的更新。捕获事件 popstate和hashchange。首先我们把捕获跳转的方法写好，为了比较容易分析 popstate和 hashchang两个方事件我们都注册到页面上。
window.addEventListener('popstate', function(e) {    console.log(history.state);});window.addEventListener('hashchange', function() {    console.log(location.hash);});
接下来location.href或location.hash
function pushhs(){    //location.href='a1';    location.hash='a1';    return false;}
/*在页面上调用
pushhs()方法，大家会发现popstate和hashchange都会被调用。只是这个时候history.state为null。在上面方法中用href和hash效果是一样的。这样就实现了单页的跳转和跳转后事件的捕获。但是大家会发现，这样的单页跳转只能是页面文件后面跟上的“#哈希值”在变化，那么打个比方，如果我不想用这个#。如果我想让页面文件名后面的方式不适用hash变化这种方式呢？对那么我们就不能location跳转方式了。大家看下面方法：


*/

function pushhs1(){    history.pushState({ 'page_id': 'a1'}, 'a1-title', '#a1');
   location.replace(location.href);    
   return false;
}

/*上面方法中主要理解为什么要
location.replace(location.href); 原因就是pushstate的时候是不触发popstate的。   在上面方法调用过程中大家会发现每一次跳转只处罚了popstate事件，这事需要注意的。另外上面方法中的url的值参数我填的是 '#a1',大家可以改成你的页面地址文件名后 + "?a1"。大家会发现pushstate不局限于哈希值。

比较推荐使用pushstate方法。

*/