.pages>div{display: none;}

aaa

bbb

cccc

//hash 和页面一一对应起来

//router 配置

var router = [

{path:"/",component:document.getElementById("home")},

{path:"/about",component:document.getElementById("about")},

{path:"/user",component:document.querySelector(".user")},

]

// 默认hash

window.location.hash = "#/";

// 默认页面

var currentView = router[0].component;

currentView.style.display="block";

window.οnhashchange=()=>{

//通过判断hash切换div页面

console.log(location.hash);

//获取hash值,不要井号

var hash = location.hash.slice(1);

router.forEach(item=>{

if(item.path==hash){

//先隐藏之前显示的页面

currentView.style.display = "none";

// 显示对应的组件

item.component.style.display = "block";

//重新设置当前显示的页面是哪个div

currentView = item.component;

}

})

}