一、方案:通过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.onhashchange=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事件同样可以实现简单的前端路由