路由（一）

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

一、路由的模式

1、hash模式：使用锚点

2、history模式：利用浏览器的broswerHistory原理

hash模式原理

利用window.onhashchange事件来实现的。

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

window.onhashchange = e => { 
    console.log('老url ', e.oldURL); 
    console.log('新url ', e.newURL); 
    console.log('hash ', location.hash); 
}
window.addEventListener('DOMContentLoaded', () => {
    console.log(location.hash); 
})
myBtn.addEventListener('click', () => { 
    location.href = '#/user'; 
})

当hash发生变化的时候，都会触发浏览器的onhashchange方法。

broswerHistory原理

利用window.onpopstate事件来实现的

window.addEventListener('DOMContentLoaded', () => { 
    console.log('path: ', location.pathname); 
}) 
window.onpopstate = e => { 
    console.log('onpopstate', e.state, location.pathname); 
}
myBtn.addEventListener('click', () => { 
    const state = {name: 'user'}; 
    history.pushState(state, '', 'user'); 
    console.log('切换路由到了', 'user'); 
})

window.onpopstate是popstate事件在window对象上的事件处理程序.

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

注意 调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)，此外，a 标签的锚点也会触发该事件.

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.