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