一、方案：通過hash
目錄結構如圖：
只有main,html是完整的html，其他兩個都是html片段
①main.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>home</title>
</head>
<body>
<h4>歡迎來到前端路由實現方案主頁</h4>
<a href="#about">跳轉到about</a>
<a href="#brand">跳轉到brand</a>
<script src="../../jquery/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.οnhashchange=function(){
var target=location.hash.slice(1)+".html"
$.ajax({
type:"get",
url:target,
dataType:"html",
success:function(data){
$("body").html(data);
}
})
}
</script>
</body>
</html>②about.html
<h3>這裏是關於我們</h3>
<a href="#main">跳轉到home</a>
<a href="#brand">跳轉到brand</a>③brand.html
<h3>品牌欄目</h3>
<a href="#main">跳轉到home</a>
<a href="#about">跳轉到about</a>二、方案：通過HTML5的新api
html5中戲贈的兩個api：
history.pushState
history.replaceState
都可以將頁面的url在當前域內任意修改，配合window.onpopstate事件同樣可以實現簡單的前端路由