©2020-2024 ioDraw All rights reserved
<>我希望大家敲一遍
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
.pages>div{display: none;} </style> </head> <body> <p> <a href="#/">aaa</a> <a
href="#/about">bbb</a> <a href="#/user">cccc</a> </p> <div class="pages"> <div
id="home">首页</div> <div id="about">关于我的页面</div> <div class="user">用户中心</div>
</div> </body> <script type="text/javascript"> //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.onhashchange=()=>{ //通过判断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; } }) } </script>
</html>