hash模式 vs history模式

hash模式

hash 就是指 url 尾巴后的 # 号以及后面的字符。

hash 模式背后的原理是onhashchange事件。

hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件

// 设置 url 的 hash，会在当前url后加上 '#test' 
window.location.hash = 'test' 
// '#test'
var hash = window.location.hash
// 监听hash变化，点击浏览器的前进后退会触发
window.addEventListener('hashchange', function(){ })

hash模式又叫前端路由，这成为了单页应用标配；

 

history模式

hash 能兼容到IE8， history 只能兼容到 IE10；

hash路由的问题

• hash 是解决页面定位的，拿来做路由的话，锚点功能无法使用
• hash 的传参是基于 url 的，由于体积的限制，无法传递复杂的数据
• 对强迫症程序员来说，hash路由很丑

history api

1. 切换：历史状态包括back、forward、go。对应浏览器的前进，后退，跳转操作
2. 修改：历史状态包括了 pushState,  replaceState两个方法

// 创建新的历史记录 
window.history.pushState(state, title, url) 
// state：需要保存的数据 
// title：标题 
// url：设定新的历史记录的 url。可以是绝对路径，也可以是相对路径。 
// 如 
// https://www.baidu.com/a/, 
// history.pushState(null, null, './qq/') => https://www.baidu.com/a/qq/， 
// history.pushState(null, null, '/qq/') => https://www.baidu.com/qq/ 
// 修改当前历史记录 window.history.replaceState(state, title, url) 
// 监听浏览器前进后退事件 
window.addEventListener("popstate", function() { //... });

history 模式改变 url 的方式会导致浏览器向服务器发送请求，如果不需要，需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个 html 页面。

history模式的问题

history模式进行刷新，页面即会请求服务器数据。如果请求不到资源，则会返回404，需要注意处理。