但是无法获取
www..demo.com/index.html#user
www..demo.com/index.html#detail
借助html5新的API pushState可以很好的解决这个问题
我们看一个代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>
<div id="container">
</div>
</body>
<script>
var ul = document.querySelector('#nav'),container = document.querySelector('#container');
//设置页面内容方法 var setContainer = function (url) { //ajax请求页面template container.innerHTML = 'ajax返回的页面' + url; }; ul.addEventListener('click',function (e) { var target = e.target; if (target.nodeName !== 'A') { return; } var url = target.hash.replace('#',''); history.pushState(url,null,url); // 当A标签触发点击时，改变浏览器url setContainer(url); e.preventDefault(); e.stopPropagation(); });
//当用户使用前进/后退按钮时候 window.addEventListener('popstate',function (e) { setContainer(e.state); }); </script> </html>
因为不适用#结构，所以每一个url都是一个请求，那么，在服务端我们需要设置这些请求返回的都是这样的页面才行
<html>
<body>
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>
<div id="container">
</div>
</body>
