前端路由实现

路由实现原理，就是根据不同的 url ，在页面上显示相应的内容。而浏览器 url 变化时，会造成页面的刷新。前端路由要解决问题就是，在改变 url 的情况下，保证页面的不刷新。

hash

url 中的 hash 改变时，浏览器不会向服务器发送请求，页面不会刷新。

hash 应用的常见场景如，用 hash 实现页面导航。如下代码，点击 a 标签 '联系'（a 标签的 href 属性值为 #contact），浏览器 url 会变成http://www.xxx.com/#contact，页面会定位到元素 id 为 contact 的位置。

    
        
    
    
        

            
首页
            
关于
            
作品
            
联系
        
        
            
首页
            
关于
            
作品
            
联系
        
    

另外，url 的 hash 变化时，会触发 hashchange 事件，该事件上有两个属性，oldURL 和 newURL，分别表示跳转前的 url 和跳转后的 url。通过分析 event.newURL 字段，配合 AJAX 发送请求，即可让页面展示相对应的内容。

window.addEventListener('hashchange', function(event) {
  console.log('Hash changed from ' + event.oldURL);
  console.log('Hash changed to ' + event.newURL);
});

history api

html5 的 history api 可以实现无刷新更改地址栏链接，再配合 AJAX 即可实现页面无刷新跳转。具体实现：当用户点击导航链接 a 标签时，通过 replaceState 将浏览器地址栏的 url 更改为 a 标签 href 属性的值，同时配合 AJAX 获取数据，替换页面 DOM 中的内容。

history 作为一个全局变量（即 window.history），不继承任何属性，在 html4 标准中，history 有如下属性和方法：

• History.length 属性: 返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。
• History.back() 方法：前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法。等价于history.go(-1).
• History.forward() 方法：在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法。等价于 history.go(1).
• History.go() 方法：通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者不是整数的参数时也没有效果。

html5 标准中，history新增了 history.pushState(state, title, url)、history.replaceState(state, title, url) 方法，和 popstate 事件。

• History.pushState(state, title [, url]) 方法：往浏览历史堆栈的顶部添加一个状态，不刷新页面。pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。

  state 为一个对象或 null，它会在触发 window 的 popstate 事件（window.onpopstate）时，作为参数的 state 属性传递过去；如果你像 pushState() 方法传递了一个序列化表示大于 640k 的 state 对象，这个方法将扔出一个异常。如果你需要更多的空间，推荐使用 sessionStorage 或者 localStorage。title 为页面的标题，但当前所有浏览器都忽略这个参数。URL 为页面的 URL，不写则为当前页；新 URL 必须和当前URL在同一个源下；否则，pushState() 将丢出异常。

• History.replaceState(state, title [, url])：更改当前页面的历史记录值，不刷新页面。参数同上。这种更改并不会去访问该URL。

• **popstate ** 事件：当活动历史记录条目更改时，将触发 popstate 事件。如果被激活的历史记录条目是通过对 history.pushState() 的调用创建的，或者受到对 history.replaceState() 的调用的影响，popstate 事件的 state 属性包含历史条目的状态对象的副本。

  需要注意的是调用 history.pushState() 或history.replaceState() 不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮。

  当我们需要监听该事件并作出相应响应时，我们应该这样组织代码：

window.addEventListener("popstate", function(e) {
    var state = e.state;
    // do something...
});

---

【1】https://juejin.im/post/5aebc4a26fb9a07acc11924d

【2】https://www.renfei.org/blog/html5-introduction-3-history-api.html

【3】https://hijiangtao.github.io/2017/08/20/History-API-and-Location-Object/

【4】https://developer.mozilla.org/zh-CN/docs/Web/API/History