您的位置：首页 > Web前端

前端路由

2016-06-08 18:12 375 查看
一、方案：通过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事件同样可以实现简单的前端路由
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  前端-路由-htm5
相关文章推荐
新的分享
章节导航