两种思路实现单页面路由的功能

在项目中需要去实现一个简单地单页面应用，不同的页面会ajax查询不同的参数返回不同的内容填充页面内，所以需要自己去实现类似页面路由的功能，经过思考大概有两种解决方案：

一、用HTML5 history pushState/replaceState属性实现页面的前进后退功能

实现思路大致如下：

1.当页面发生跳转时，将要查询的参数添加在url的参数中，如www.xxx.com?a=1&b=2，通过history.pushState将该地址加入到浏览器的历史页面中；

2.因为浏览器前进后退都会触发popState事件，所以需要监听浏览器的popState事件当后退或者前进发生时根据url后面参数的变化重新进行ajax请求以及内容的填充；

3.另外还需要考虑页面第一次进入无参数的情况，因此需要在页面初始化的时候设置一个默认参数例如第一个菜单的页面参数，另外通过history.replaceState将该页面加入到历史页面中

简单地demo：

(function(){

	var initHash = function() {
		var param = location.href.split('?')[1]
		//如果没有查询参数
		if(typeof param == "undefined") {

		}else{
			//根据参数ajax查询并填充dom
		}
	}

	if (history.pushState) {
		initHash()
		window.addEventListener("popstate", function() {
	        initHash();                             
	    });	
	}
	

})()

　　但是这个方法因为是用了HTML5的新特性所以不兼容ie8，所以在项目中并不适用，所以在实际操作中我用了第二种方法

二、利用location.hash来实现页面的后退及前进

基本思路如下：

1.在页面初始化的时候读取url中的hash内容，然后根据hash中的参数进行ajax查询。

2.在页面内部跳转的时候有一个难题需要解决，就是当页面的hash改变时页面不会即时刷新，所以需要去监听hash的变化，但是hashashchange这个事件也只兼容ie8+的浏览器，为了解决兼容性可以在ie8及以下写一个定时函数定时去读取hash的值以监听起变化。另外可以用jquery-hashchange.js插件直接代替（https://github.com/cowboy/jquery-hashchange/）

3.同理，在第一次进入到此页面时需要为其设置一个默认参数。

demo如下，其实和第一个很相像：

(function(){

	var showByTag = function() {
		var param = location.hash.substr(1);
		//如果没有查询参数
		if(typeof param == "undefined") {

		}else{
			//根据参数ajax查询并填充dom
		}
	}

	if (history.pushState) {
		showByTag();
		$(window).hashchange(function () {
            window.scrollTo(0,0);
            showByTag();
	    });
	}
	

})()

　　

以上