---恢复内容开始---
在移动端，越来越倾向于页面内跳转，而页面内跳转就需要用到history的管理，html5的history是一种解决方案。
在没有history ap之前，我们经常使用散列值来改变页面内容，特别是那些对页面特别重要的内容。因为没有刷新，所以对于单页面应用，改变其URL是不可能的。此外，当你改变URL的散列值，它对浏览器的历史记录没有任何影响。通过增加location.hash,并用onhashchange来达到目的。
现在对于HTML 5的History API来说，这些都是可以轻易实现的，但是由于单页面应用没必要使用散列值，它可能需要额外的开发脚本。它也允许我们用一种对SEO友好的方式建立新应用。
使用history
HTML 5提供了两个新方法：pushstate跟replaceState，两个方法参数一样
params {
state：存储JSON字符串，可以用在popstate事件中,可以通过locaton.state获取。
title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替
url：任意有效的URL，用于更新浏览器的地址栏，并不在乎URL是否已经存在地址列表中。更重要的是，它不会重新加载页面。
}
两个方法的主要区别就是：pushState()是在history栈中添加一个新的条目，replaceState()是替换当前的记录值。用pushState的时候会产生一条新的history，replaceState则不会产生。
当我们使用pushState()和replaceState()进行处理时或者点击浏览器的前进后退的时候，popstate事件会被触发，通过监听popstate事件可以达到一系列功能。
浏览器支持
history在某些浏览器上支持还不是特别好，可以引用这个实现兼容的js
https://github.com/browserstate/history.js
案例DEMO
通过点击页面的导航，实现页面内跳转，根据popstate监听URL的改变显示不同的页面.
这种路由方式还需要服务器端的支持，不然刷新页面会出现404
如果入口是index，apache可以在根目录下建个.htaccess文件，配置如下，
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
如果你用的ngnix，配置如下
server {
...
location / {
try_files $uri /index.html;
}
}
index.html
<!DOCTYPE html> <html> <head> <title>History API</title> <meta charset="utf-8" /> </head> <body> <ul id="menu"> <li><a href="/home">首页</a></li> <li><a href="/about">关于我们</a></li> <li><a href="/blog">博客</a></li> <li><a href="/photos">相册</a></li> </ul> <button id="back">Back</button> <button id="forward">Forward</button> <div> Action: <span id="action"></span><br/> Url: <span id="url"></span><br/> Description: <span id="description"></span> </div> </body> </html>
js代码
document.addEventListener('DOMContentLoaded', function(){
var act, historyState;
var menu = document.querySelectorAll('li a');
historyState = {
home : {
description : "我是首页------Index Page"
},
about : {
description : "关于我们------About Page"
},
blog : {
description : "博客页面------Blog Page"
},
photos : {
description : "相册页面------Photos Page"
}
};
for( let i =0; i < menu.length; i++ ) {
menu[i].addEventListener('click', function(e){
e.preventDefault();
var hash = menu[i].getAttribute('href');
var key = hash.replace('/','');
act = "点击导航";
historyState[key].url = key;
//history.pushState(historyState[key], null, hash);
history.replaceState(historyState[key], null, hash);
setStateInfo( historyState[key] );
},false);
}
window.addEventListener('popstate', function(event){
var state = history.state || event.state || window.event.state;
if( state) setStateInfo(state);
},false);
document.querySelector("#back").addEventListener('click', function(){
act = "点击后退按钮";
history.back();
}, false);
document.querySelector("#forward").addEventListener('click', function(){
act = "点击前进按钮";
history.go(1);
});
function setStateInfo( state ){
//ajax处理不同的数据
document.querySelector('#action').innerHTML = act;
document.querySelector("#url").innerHTML = state.url;
document.querySelector('#description').innerHTML = state.description;
}
//第一次加载进来的时候
var path = location.pathname;
var arr = path.split('/');
var index = arr[arr.length - 1] || 'home'
act = "刷新页面";
historyState[index].url = index;
setStateInfo(historyState[index]);
//history.pushState(historyState[index], null, '/home')
history.replaceState(historyState[index], null, hash);
},false);
通过切换就可以达到页面跳转和ajax刷新的效果，而不再出现hash散列值
---恢复内容结束---
