# 路由原理
路由模式
- 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)
}
← $nextTick相关 生命周期 →