<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
.flex-box{
display: flex;height: 100px;
}
.center{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="flex-box">
<span class="flex1 center route">home</span>
<span class="flex1 center route">shop</span>
<span class="flex1 center route">shopcar</span>
<span class="flex1 center route">usercenter</span>
</div>
<div id="root"></div>
</body>
<script>
const routes = [{
path:'/0',
template:'<div>00000000AA</div>'
},{
path:'/1',
template:'<div>11111111BB</div>'
},{
path:'/2',
template:'<div>22222222CC</div>'
},{
path:'/3',
template:'<div>33333333DD</div>'
}]
</span><span style="color: #0000ff;">var</span> list = document.getElementsByClassName(<span style="color: #800000;">'</span><span style="color: #800000;">route</span><span style="color: #800000;">'</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">for</span> (let i <span style="color: #0000ff;">in</span><span style="color: #000000;"> list) {
list[i].onclick </span>= ()=> window.location.hash =`/<span style="color: #000000;">${i}`;
}
window.addEventListener(</span><span style="color: #800000;">'</span><span style="color: #800000;">hashchange</span><span style="color: #800000;">'</span><span style="color: #000000;">,function(e){
</span><span style="color: #0000ff;">var</span> path = e.newURL.split(<span style="color: #800000;">'</span><span style="color: #800000;">#</span><span style="color: #800000;">'</span>)[<span style="color: #800080;">1</span><span style="color: #000000;">];
document.getElementById(</span><span style="color: #800000;">'</span><span style="color: #800000;">root</span><span style="color: #800000;">'</span>).innerHTML = routes.find(item=> item.path ==<span style="color: #000000;"> path).template;
})
</script>
</html>
TRANSLATE with