代码
提交代码
<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>
运行结果