前端路由一般分為兩種方式

• hash路由
• H5 History路由

簡單介紹下這兩個路由：

hash路由

1. 標志：hash路由的標志是帶有#
2. 原理：通過監(jiān)聽url中的hash值變化來進行路由跳轉(zhuǎn)箍铲。
3. 優(yōu)勢：兼容性更好,在老版IE中都有運行
4. 問題：url中一直存在#，頁面不夠美觀

實現(xiàn)

1. 新增Route類
2. 構(gòu)造函數(shù)中增加實例屬性routers用于存儲路由，currentUrl用于保存當前頁面地址迂卢。
3. 構(gòu)造函數(shù)中添加對路由變化的監(jiān)聽
4. 新增注冊函數(shù)route
5. 新增回退函數(shù)back

• 構(gòu)造函數(shù)中新增history數(shù)組霞掺，用于保存歷史hash
• 構(gòu)造函數(shù)中新增currentIndex實例屬性骂束，用于追蹤歷史hash

class Router {
    constructor() {
        this.routes = {}; //鍵值對形式存儲路由信息
        this.currentUrl = ''; //當前Url
        this.history = []; //hash歷史
        this.currentIndex =this.history.length - 1; //默認指向當前最新的hash
        window.addEventListener('load', this.refresh, false);
        window.addEventListener('hashchange', this.refresh, false);
        this.refresh = this.refresh.bind(this);
        this.back = this.back.bind(this);
    }
    route(path, calllback) {
        // 注冊路由
        this.routes[path] = callback || function () {}
    }
    refresh() {
        // 獲取除去#的hash值
        this.currentUrl = location.hash.slice(1);
        this.history.push(this.currentUrl);
        this.currentIndex++;
        this.routes[this.currentUrl] && this.routes[this.currentUrl]();
    }
    back() {
        // 如果當前指向歷史最早的hash，不再回退
       this.currentIndex >= 0? (this.currentIndex = 0) : (this.currentIndex -= 1);
       this.currentUrl = this.history[this.currentIndex];
       this.routes[this.currentUrl] && this.routes[this.currentUrl]();
    }
}

H5 History路由

H5新增的History對象盗忱，里面有各種API，常用API包含以下3個：

window.history.back();       // 后退
window.history.forward();    // 前進
window.history.go(-3);       // 后退三個頁面

在瀏覽器點擊前進后退就會調(diào)用以上API羊赵。想要實現(xiàn)路由趟佃，還有幾個重要的API需要我們知道：

• history.pushState
  用于在瀏覽歷史中添加歷史記錄,但是并不觸發(fā)跳轉(zhuǎn),此方法接受三個參數(shù)，依次為：
  （1）state：一個與指定網(wǎng)址相關的狀態(tài)對象昧捷。popstate事件觸發(fā)時才會產(chǎn)生闲昭，如果不需要可以填null。
  （2）title：新頁面的標題靡挥，一般為null序矩。
  （3）url：新的網(wǎng)址，要求與當前頁面處在同一個域跋破。
• history.replaceState
  方法參數(shù)與pushState方法一樣贮泞，區(qū)別是它修改瀏覽歷史中當前紀錄楞慈，而非添加記錄，同樣不觸發(fā)跳轉(zhuǎn)啃擦。
• popstate事件
  每當同一個文檔的history對象出現(xiàn)變化時囊蓝，就會觸發(fā)popstate事件。僅僅調(diào)用pushState方法或replaceState方法并不會觸發(fā)該事件令蛉。只有當用戶點擊瀏覽器倒退按鈕和前進按鈕聚霜，或使用js調(diào)用back、forward珠叔、go方法時才會觸發(fā)蝎宇。

實現(xiàn)

class Router {
    constructor() {
        this.routes = {};
        // 構(gòu)造函數(shù)中監(jiān)聽popstate
        this.watchPopState();
        this.init = this.init.bind(this);
        this.go = this.go.bind(this);
        this.back = this.back.bind(this);
    }
    route(path, calllback) {
        // 注冊路由
        this.routes[path] = callback || function () {}
    }
    init(path){
        history.replaceState({path: path}, null, path);
        this.routes[path] && this.routes[path]();
    }
    go(path) {
        history.pushState({path: path}, null, path);
        this.routes[path] && this.routes[path]();
    }
    back() {
        history.back();
    }
    watchPopState() {
        window.addEventListener('popstate', e => {
            const path = e.state && e.state.path;
            this.routes[path] && this.routes[path]();
        })
    }
}

使用方式如下：

window.Router = new Routers();

Router.init(location.pathname);
Router.route('/', function() {
    changeBgColor('yellow');
})

let link = document.querySelector('a');

link.addEventListener('click', e => {
    e.preventDefault();
    let href = e.target.getAttribute('href')
    Router.go(href);
}, false);