摘要：開發中路由實現原理開發中路由實現原理服務端路由路由前端路由實現比較參考什么是路由根據不同的地址，展示不同的頁面或者更新頁面局部視圖服務端路由服務器端路由管理，常見的開發模式是前端根據的不同，使用發起異步請求，獲取不同的頁面資源，前端獲取資源

Web開發中路由實現原理

服務端路由

Hash路由

History

前端路由實現比較

參考:

什么是路由:

根據不同的url地址，展示不同的頁面或者更新頁面局部視圖

Demo

服務器端路由管理，常見的開發模式是前端根據url的不同，使用ajax發起異步請求，獲取不同的頁面資源，前端獲取資源后更新頁面。

后端路由處理，一般是基于前后端沒有分離的項目，html和數據綁定發生在后端(后端渲染)，有利于SEO，因為每次發送請求都需要獲取資源，對服務器造成資源浪費，前端頁面可能因為網速造成延遲，頁面局部視圖更新，ajax請求不同保存當前的請求狀態，不能使用瀏覽器前進后退快捷鍵操作。

server路由處理實現類似于下面實現:不同的url請求路徑，返回不同的模板

app.get("", function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.sendFile( __dirname + "/" + "index.html" );
})

app.get("/home.html", function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.sendFile( __dirname + "/" + "pages/home.html" );
})

app.get("*", function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.sendFile( __dirname + "/" + "pages/404.html" );
})

Demo

在單頁面(SPA)開發中，通過Hash可以實現前端路由，hash路由形如:http:localhost:8100/#/home,
在url后綴存在#(錨點)，用來做頁面定位，即根據頁面id將該元素所在的區域展示在可視區域，#后面內容的改變不會發送請求到服務器。

前端路由需要實現一下:

根據不同的hash展示對應的頁面

監聽hash值的改變

保存當前url的請求狀態或者參數(比如頁面刷新和分享鏈接，別人可以獲取同樣的內容)

可以實現瀏覽器的前進后退功能

原理:
頁面hash值可以通過 window.location.hash 屬性獲取，當url的hash值發生變化，會觸發window對象的hashchange事件，通過監聽 hashchange 事件，操作 window.location.hash 屬性可以實現

Route.js

function Route(params) {
    if(!params){
        console.log("請檢查初始化數據")
        return false;
    }
    this.registeredRoute = [];
    this.contentId = params.contentId;
    this.routes = params.routes;
    this.devStatus = params.devStatus || "none"
    this.otherRouter = params.otherRouter;
    this.init();
} 

Route.prototype = {
    constructor: Route,
    init: function()  {
        window.addEventListener("hashchange", (function(event){ 
            var currentHash = location.hash.substring(1) || this.otherRouter;
            var route = this.routes && this.routes.find(item => item["path"] === currentHash);
            if(this.devStatus === "log") {
                console.log("hash has been changed to:", currentHash)
            }
            if(route) {
                this.activeRoute();
                this.render(route)
            }

        }).bind(this))
        var initEvent = new Event("hashchange");
        window.dispatchEvent(initEvent);
    },
    //更新視圖
    render(route) {
        if(!$){
            console.log("請確保項目正確引入jQuery")
            return false;
        }
        var _routeContent =  $(`#${this.contentId}`);
        if(_routeContent) {
            var currentView = `
current page: ${route["path"]}
 
            
Params:${JSON.stringify(route["params"])} 
            
View:${route["component"]}
`;
            _routeContent.html(currentView)
        }else {
            console.log("請綁定需要更新的視圖區域");  
        }
    },
    //當前激活路由樣式
    activeRoute() {
        var _routeList = $(".route") || [];
        for(var i=0; i< _routeList.length;i++) {
            var _item = _routeList[i];
            var _classList = _item.classList;
            var _defActice = !location.hash && _aDome["context"].getAttribute("data-route-param")==="home");
            var _aDome = $(_item.getElementsByTagName("a") && $(_item.getElementsByTagName("a")[0]);
            var _activeBool = _aDome["context"].getAttribute("data-route-param") === location.hash.substring(1)
            || _defActice;
            if(_activeBool) {
                _classList.add("active")
            } else {
                _classList.remove("active");
            }
        }
    }

}

index.html 片段

Demo

window.history (window是瀏覽器的全局對象，所以window.history和history相同)是瀏覽器提供的用來記錄和操作瀏覽器頁面歷史棧的對象的接口，提供了常用的屬性和方法：

history.back();     //回退
history.go(-1);     //等同于history.back();
history.forward();  //前進
history.go(1); //等同forward()
window.history.length; //歷史棧頁面的數量

H5對History進行了擴展，增加了兩個重要的新的方法:

History.pushState()  //瀏覽器歷史記錄壓棧，增加一條歷史記錄
History.replaceState() //瀏覽器歷史記錄最后一條數據更新，替換當前歷史記錄

操作pushState和replaceState方法會觸發popstate事件，頁面刷新不同瀏覽器事件監聽存在差異，Chrome和Safari會觸發popstate事件，Firefox不會觸發。
我們可以通過pushState()，replaceState()記錄和更新當前url和參數;
pushState(),replaceState()包含三個參數:

state:存儲當前參數的JSON
title:短標題，瀏覽器實現不統一有些fireFox會直接忽略，可以設置為null做占位，
url:當前url，更新瀏覽器url的值

hash 路由實現: 兼容性比較好，url比較丑陋，不能使用瀏覽器棧操作前進后退

History 路由實現: 比較直觀，需要服務器端配合，用戶體驗好，響應快，不需要每次發送服務器請求，通過操作瀏覽器歷史棧完成頁面跳轉，低版本瀏覽器不支持H5特性，建議使用Hash

1.前端路由的前生今世及實現原理