一:html页面
<a href="#/one">one</a> <a href="#/two">two</a> <a href="#/three">three</a> <a href="#/four">four</a>
<div class="router-view"></div>
<script>
routes=[
{path:"/one",component:"./one.html"},
{path:"/two",component:"./two.html"},
{path:"/three",component:"./three.html"},
{path:"/four",component:"./four.html"}
]
var cache={}; //缓存
window.location.href="#/one";
window.οnhashchange=function(){
routes.forEach(item => {
var hash=location.hash.replace("#",""); //location.hash可以获取url
if(item.path==hash){
console.log(hash)
if(!cache[hash]){
$.get(item.component).then(res=>{
cache[hash]=res;
$(".router-view").html(cache[hash])
})
}else{
$(".router-view").html(cache[hash])
}
}
});
}
</script>