路由原理

路由模式

• hash
• history 需要后端支持

hash模式

• 通过hash的变化触发页面的跳转，即浏览器的前进后退。
• hash变化不需要刷新页面。
• hash永远不会提交到server端，前端控制。

触发hash变化的几种情况

• 1 js修改url
• 2 手动修改url的hash
• 3 浏览器前进后退

window.onhashchange = (event) =>{
    console.log('oldUrl',event.oldURL)
    console.log('newUrl',event.newURL)
    //当前hash值
    console.log('hash',location.hash)
}

history

• 用url规范的路由，但跳转时不刷新页面。
• 核心 pushState && onpopState
• history路由需要服务器的支持，并且需将所有的路由重定向倒根页面。

const state = {name: 'page1'}
history.pushState(state,'','page1');//跳转到page1

//监听浏览器前进 后退
window.onpopstate = (event) =>{
    console.log('onpopstate',event.state,location.pathname)
}