代碼
提交代碼
<section id="app">
<a href="user" class="link">用戶中心</a>
<a href="setting" class="link">設置</a>
<div class="container"></div>
</section>
<script>
// 注冊路由
document.querySelectorAll('.link').forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
// 拿到需要注冊的地址
let link = item.getAttribute('href');
// 往history中添加一個歷史記錄 0-參數 1-title 2-url
window.history.pushState({name: link}, link, link);
// 具體要做的業務
document.querySelector('.container').innerHTML = link;
}, false);
});
// 監聽路由
window.addEventListener('popstate', function(e) {
console.log({
location: location.href,
state: e.state
});
document.querySelector('.container').innerHTML = e.state.name;
}, false);
</script>
運行結果