路由 Router

Router 原理

• 路由历史
• 路由跳转
• 逻辑事件

常见Router

• 页面Router

window.location.href = 'http://www.baidu.com'

• Hash Router

window.location = '#test'
window.hashchange = function () {
  console.log('current hash:', window.location.hash);
}

• H5路由

推进一个状态：history.pushState('name','title','#test')
history.pushState('name','title','/usr/index')
替换一个状态：history.replaceState('name','title','/index/test')
window.onpopstate = function (e) {
  console.log('h5 router change',e.state);
}
window.onpopstate = function () {
  console.log(window.location.href);
  console.log(window.location.pathname);
  console.log(window.location.hash);
  console.log(window.location.search);
}