摘要：首發前端路由實現了解新增了兩個和兩個都接收三個參數狀態對象一個對象，與用方法創建的新歷史記錄條目關聯?？紤]到未來可能會對該方法進行修改，傳一個空字符串會比較安全。該參數是可選的不指定的話則為文檔當前。

首發：前端路由實現（history）

HTML5 history新增了兩個API:history.pushState和history.replaceState

兩個API都接收三個參數：

狀態對象（state object）：一個JavaScript對象，與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態，popstate事件都會被觸發，并且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝。

標題（title）：FireFox瀏覽器目前會忽略該參數，雖然以后可能會用上?？紤]到未來可能會對該方法進行修改，傳一個空字符串會比較安全?；蛘撸阋部梢詡魅胍粋€簡短的標題，標明將要進入的狀態。

地址（URL）： 新的歷史記錄條目的地址。瀏覽器不會在調用pushState()方法后加載該地址，但之后，可能會試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL為基準；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。該參數是可選的；不指定的話則為文檔當前URL。

相同之處是兩個 API 都會操作瀏覽器的歷史記錄，而不會引起頁面的刷新。

不同之處在于pushState會增加一條新的歷史記錄，而replaceState則會替換當前的歷史記錄。

這里大家可以先F12試試，看看地址欄發生了什么變化

window.history.pushState(null, null, "hell");

window.history.pushState(null, null, "/hell");

window.history.pushState(null, null, "#/hello");

window.history.pushState(null, null, "?name=");

注意：這里的url不支持跨域，否則會拋出異常

index.html

    
    
    
    
    
    


    

        
          
            

                
首頁
 
                
新聞
                
關于
            
        
        

            
        
    
    
    
    
 

一：簡單開胃菜

router.js

;(function(){      
      history.replaceState(null,null,"");//最開始的狀態，采用replace直接替換
    $("#router").html("
nav1
")
    $("a").on("click",function(){
        console.log(this.text)
        var text = this.text;
        $("#router").html("
"+ text +"
")
        history.pushState(null,null,"#/"+text);
    })    
})()

最簡單的示例，只能監聽點擊事件,而瀏覽器中的后、前進都不能監聽地址欄的改變

二、數據狀態管理

router.js

狀態版
;(function(){      
      var count = [0,0,0]
      $("#router").html("
導航1：
"+count[0]+"
導航2：
"+count[1]+"
導航3：
"+count[2])
      history.replaceState(count,null,"");//最開始的狀態，采用replace直接替換
    
    for(var i = 0 ; i<$("a").length; i++){
        $("a")[i].index = i
        $("a").eq(i).on("click",function(){
            console.log(this.index);
            var index = this.index;
            count[index]++;
            $("#router").html("
導航1：
"+count[0]+"
導航2：
"+count[1]+"
導航3：
"+count[2])
            history.pushState(count,null,"#/count"+count[index]);//之后的狀態，需要進行保存
        })
    }
        
    
    //監聽history其他api導致地址欄url改變事件
    window.addEventListener("popstate",function(e){
        console.log(e.state);
        var state = e.state;
        $("#router").html("
導航1：
"+state[0]+"
導航2：
"+state[1]+"
導航3：
"+state[2])
        
    })
})()

popstate

當活動歷史記錄條目更改時，將觸發popstate事件。如果被激活的歷史記錄條目是通過對history.pushState（）的調用創建的，或者受到對history.replaceState（）的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。
需要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）

三：回歸簡單

router.js

;(function(){      
      
      var url = "nav1";

      history.replaceState(url,null,"");//最開始的狀態，采用replace直接替換
    $("#router").html("
"+url+"
")

    $("a").on("click",function(){
        console.log(this.text)
        url = this.text;

        $("#router").html("
"+ url +"
")
        history.pushState(url,null,"#/"+url);
    })
    window.addEventListener("popstate",function(e){
        console.log(e.state);
        url = e.state
        $("#router").html("
"+ url +"
")
        
     });     
})()

兜兜轉轉我們算是回到了起點，但是通過這張圖我們會發現頁面點擊刷新按鈕會有導航和內容塊不一致的內容，所以我們需要改進他，并且監聽load事件

改進

;(function(){      
      
    $("a").on("click",function(){
        console.log(this.text)
        url = this.text;

        $("#router").html("
"+ url +"
")
        history.pushState(url,null,"#/"+url);
    })
    window.addEventListener("popstate",function(e){
        console.log(e.state);
        url = e.state
        $("#router").html("
"+ url +"
")
        
     });
    window.addEventListener("load",function(){
        url = location.hash.slice(2) || "nav1";
        history.replaceState(url,null,"");
        console.log(location.hash);
        $("#router").html("
"+ url +"
");
    });

      
})()

可以看到我們點擊刷新的時候導航和內容區域一致了。

四：路由頁面引進

我們這里還是采用了ajax的load方法

router.js

;(function(){ 


    var router = [
          {
              "path":"index",
              "url":"./main.html"
          },
          {
              "path":"news",
              "url":"./news.html"
          },
          {
              "path":"about",
              "url":"./about.html"
          }
      ];

      //改變頁面
      function display_page(url){
          $("#router").load(url)
      }

    $("a").on("click",function(){
        var path = $(this).data("path");
        console.log(path)
        for(var i in router){
            if(router[i].path == path){
                display_page(router[i].url);
                history.pushState(router[i].url,null,router[i].path);
            }
        }
    })
    window.addEventListener("popstate",function(e){
        var url = e.state;
        display_page(url);
        
    });
    window.addEventListener("load",function(){
        var start = location.href.lastIndexOf("/");

        var path = location.hash.slice(start) || "index";
        console.log(path)

        for(var i in router){//刷新 加載
            console.log(1)
            if(router[i].path == path){
                display_page(router[i].url);    
                history.replaceState(router[i].url,null,path);        
                break;    
            }
            if(i == router.length-1){//重定向
                display_page(router[0].url);    
                history.replaceState(router[i].url,null,router[0].path);    
            }
        }                        
    });

})()

可以看到基本是實現了history路由功能，但是這里有一個問題就是刷新后因為地址欄url原因會報錯，也就是找不到這個頁面，這是由于刷新的時候是重載，重新向網站目錄查找文件，而我們當前目錄并沒有這個文件資源所以導致報錯。需要后臺攔截！ 放棄！

折中

最后我還是屈服于#了

;(function(){      
      
      var router = [
          {
              "path":"index",
              "url":"./main.html"
          },
          {
              "path":"news",
              "url":"./news.html"
          },
          {
              "path":"about",
              "url":"./about.html"
          }
      ];

      //改變頁面
      function display_page(url){
          $("#router").load(url)
      }

    $("a").on("click",function(){
        var path = $(this).data("path");
        console.log(path)
        for(var i in router){
            if(router[i].path == path){
                display_page(router[i].url);
                history.pushState(router[i].url,null,"#/"+router[i].path);
            }
        }
    })
    window.addEventListener("popstate",function(e){
        var url = e.state;
        display_page(url);
        
    });
    window.addEventListener("load",function(){
        var path = location.hash.slice(2) || "/index";
        console.log(path)
        for(var i in router){//刷新 加載
            console.log(1)
            if(router[i].path == path){
                display_page(router[i].url);    
                history.replaceState(router[i].url,null,"#/" + path);        
                break;    
            }
            if(i == router.length-1){//重定向
                display_page(router[0].url);    
                history.replaceState(router[0].url,null,"#/" + router[0].path);    
            }
        }                        
    });

})();

勉強的很呀

代碼： router(history)
演示： 演示地址