路由原理 hash/history
- 本质是监听URL的变化,然后匹配路由规则,显示相应的页面,并且无需刷新页面,目前只有两种实现方式
- Hash 模式
- History 模式
Hash 模式
-
www.test.com/#/
就是 Hash URL,当#
后面的哈希值发生变化时,可以通过hashchange事件监听到url的变化,从而进行页面跳转,并且无论哈希值如何变化,服务端接收道德url请求永远是www.test.com
。window.addEventListener('hashchange', () => { // ... 具体逻辑 })
- Hash 模式相对来说更简单,并且兼容性也更好。
History 模式
-
History 模式是 HTML5 新推出的功能,主要使用history.pushState和history.replaceState改变 URL
-
通过 History 模式改变 URL 同样不会引起页面的刷新,只会更新浏览器的历史记录
// 新增历史记录 history.pushState(stateObject, title, URL) // 替换当前历史记录 history.replaceState(stateObject, title, URL)
-
当用户做出浏览器动作时,比如点击后退按钮时会触发popState事件
window.addEventListener('popstate',e=>{ // e.state 就是 pushState(stateObject) 中的 stateObject console,log(e.state) })
两种模式的对比
- hash模式只可以更改#后面的内容,History模式可以通过API设置任意的同源URL
- History模式可以通过API添加任意类型的数据到历史记录中,hash模式只能更改哈希值,也就是字符串
- Hash模式无需后端配置,并且兼容性好,History模式在用户手动输入地址或者刷新页面的时候会发起url请求,后端需要配置index,html页面用于匹配不到静态资源的时候