hash路由的实现
<body>
<a href="#/home">home</a>
<a href="#/login">login</a>
<div class="content">
default
</div>
</body>
<script>
let el_content = document.querySelector(".content")
window.addEventListener("hashchange", function () {
switch (window.location.hash) {
case "#/home":
el_content.innerHTML = "home";
break;
case "#/login":
el_content.innerHTML = "login";
break;
default:
el_content.innerHTML = "default";
}
})
</script>
history路由的实现
<body>
<a href="/home">home</a>
<a href="/login">login</a>
<div class="content">
default
</div>
</body>
<script>
let el_content = document.querySelector(".content")
let el_a_s = document.querySelectorAll("a")
Object.values(el_a_s).forEach(item => {
let router_name = item.getAttribute("href")
history.pushState({},null,router_name)
item.addEventListener("click", function (e) {
e.preventDefault();
switch (router_name) {
case "/home":
el_content.innerHTML = "home";
break;
case "/login":
el_content.innerHTML = "login";
break;
default:
el_content.innerHTML = "default";
}
}, false)
})
</script>
扫一扫
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
