HBuilder新建一个Web项目(用HBuilder的原因是他有自带服务器 用的$.ajax必须在服务器下运行)
新建template文件夹，里面新建a.html b.html c.html 里面随便写点东西
以下是index.html的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
</head>
<body>
<a href="#/one">one</a>
<a href="#/two">two</a>
<a href="#/three">three</a>
<div id="box"></div>
<script>
var routes=[
{
path:'/one',
component:'./template/a.html'
},
{
path:'/two',
component:'./template/b.html'
},
{
path:'/three',
component:'./template/c.html'
}
]
var hash = location.hash;
if(!hash){
location.hash="#/one";
}
hash=location.hash.replace("#",'');
var cache={};//缓存
//console.log(hash);
window.addEventListener("hashchange",()=>{
hash = location.hash.replace("#",'');
routes.forEach((item)=>{
if(item.path===hash){
if(cache[hash]){
//如果缓存里存在访问过的对象，用缓存里的对象
$("#box").html(cache[hash])
}else{
$.ajax(item.component).then((res)=>{
$("#box").html(res);
cache[hash]=res;
})
}
}
})
})
//console.log($);
</script>
</body>
</html>
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
