<h2>historys</h2>
<a class="api a">a.html</a>
<a class="api b">b.html</a>
<h2>hash</h2>
<a class="hash a">c.html</a>
<a class="hash b">d.html</a>
// history
//注册路由
document.querySelectorAll('.api').forEach(item => {
item.addEventListener('click', e => {
e.preventDefault();
let link = item.textContent;
window.history.pushState({
name: 'api'
}, link, link);
})
})
//监听路由
window.addEventListener('popstate', e => {
console.log({
location: location.href,
state: e.state
})
})
// hash
//注册路由
document.querySelectorAll('.hash').forEach(item => {
item.addEventListener('click', e => {
e.preventDefault();
let link = item.textContent;
location.hash = link;
}, false)
})
//监听路由
window.addEventListener('hashchange', e => {
console.log({
location: location.href,
hash: location.hash
})
}, false)