路由跳转模式：hash & history

hash

• hash 指 url 尾巴后的 # 号以及后面的字符。
  这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。
  如下图：
  当地址栏中的url输入：'https://baidu.com/#/qq/page' 时， 其对应的hash为 '#/qq/page/'

hash.png

hash模式特点：

• 当地址栏中hash 值变化时不会导致浏览器向服务器发出请求
• 通过 hashchange 事件对 hash变化进行监听
• hash 兼容IE8+

window.addEventListener('hashchange', function(){ 
    // 监听hash变化，点击浏览器的前进后退会触发
})

hash 不足：

• hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了
• hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制
• hash模式在导航栏会出现很丑的 "#"

所以 history 出现了
在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

history

history 模式特点：

• history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
• 没有了hash模式中的 "#"

history 不足：

• 兼容IE10+
• history 模式下，改变url 的方式会导致浏览器向服务器发送请求，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。这不是我们想看到的，我们需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个 html 页面。

history 依赖的相关api：

window.history.pushState(state, title, url) 
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。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)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录

window.addEventListener("popstate", function() {
    // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发              
});

window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量