前端路由有有 hash 路由和 history 路由兩種路由方式，他們的原理是什么，又怎樣實現(xiàn)一個簡單的路由監(jiān)聽呢？

我們在使用 Vue 或者 React 等前端渲染時，通常會有 hash 路由和 history 路由兩種路由方式。

1.hash 路由：監(jiān)聽 url 中 hash 的變化，然后渲染不同的內(nèi)容，這種路由不向服務(wù)器發(fā)送請求，不需要服務(wù)端的支持；

2.history 路由：監(jiān)聽 url 中的路徑變化，需要客戶端和服務(wù)端共同的支持；

我們一步步實現(xiàn)這兩種路由，來深入理解下底層的實現(xiàn)原理。我們主要實現(xiàn)以下幾個簡單的功能：

1.監(jiān)聽路由的變化，當(dāng)路由發(fā)生變化時，可以作出動作；

2.可以前進(jìn)或者后退；

3.可以配置路由；

1. hash 路由

當(dāng)頁面中的hash發(fā)生變化時，會觸發(fā)hashchange事件，因此我們可以監(jiān)聽這個事件，來判斷路由是否發(fā)生了變化。

window.addEventListener(
    'hashchange',
    function (event) {
        const oldURL = event.oldURL; // 上一個URL
        const newURL = event.newURL; // 當(dāng)前的URL
        console.log(newURL, oldURL);
    },
    false
);

1.1 實現(xiàn)的過程

對 oldURL 和 newURL 進(jìn)行拆分后，就能獲取到更詳細(xì)的 hash 值。我們這里從創(chuàng)建一個 HashRouter 的 class 開始一步步寫起：

class HashRouter {
    currentUrl = ''; // 當(dāng)前的URL
    handlers = {};

    getHashPath(url) {
        const index = url.indexOf('#');
        if (index >= 0) {
            return url.slice(index + 1);
        }
        return '/';
    }
}

事件hashchange只會在hash 發(fā)生變化時才能觸發(fā)，而第一次進(jìn)入到頁面時并不會觸發(fā)這個事件，因此我們還需要監(jiān)聽load事件。這里要注意的是，兩個事件的event 是不一樣的：hashchange事件中的 event對象有 oldURL 和 newURL兩個屬性，但 load 事件中的 event 沒有這兩個屬性，不過我們可以通過 location.hash 來獲取到當(dāng)前的 hash 路由：

class HashRouter {
    currentUrl = ''; // 當(dāng)前的URL
    handlers = {};

    constructor() {
        this.refresh = this.refresh.bind(this);
        window.addEventListener('load', this.refresh, false);
        window.addEventListener('hashchange', this.refresh, false);
    }

    getHashPath(url) {
        const index = url.indexOf('#');
        if (index >= 0) {
            return url.slice(index + 1);
        }
        return '/';
    }

    refresh(event) {
        let curURL = '',
            oldURL = null;
        if (event.newURL) {
            oldURL = this.getHashPath(event.oldURL || '');
            curURL = this.getHashPath(event.newURL || '');
        } else {
            curURL = this.getHashPath(window.location.hash);
        }
        this.currentUrl = curURL;
    }
}

到這里已經(jīng)可以實現(xiàn)獲取當(dāng)前的 hash 路由，但路由發(fā)生變化時，我們的頁面應(yīng)該進(jìn)行切換，因此我們需要監(jiān)聽這個變化：

class HashRouter {
    currentUrl = ''; // 當(dāng)前的URL
    handlers = {};

    // 暫時省略上面的代碼

    refresh(event) {
        // 當(dāng)hash路由發(fā)生變化時，則觸發(fā)change事件
        this.emit('change', curURL, oldURL);
    }

    on(evName, listener) {
        this.handlers[evName] = listener;
    }
    emit(evName, ...args) {
        const handler = this.handlers[evName];
        if (handler) {
            handler(...args);
        }
    }
}
const router = new HashRouter();
rouer.on('change', (curUrl, lastUrl) => {
    console.log('當(dāng)前的hash:', curUrl);
    console.log('上一個hash:', lastUrl);
});

1.2 調(diào)用的方式

到這里，我們把基本的功能已經(jīng)完成了。來配合一個例子就更形象了：

// 先定義幾個路由
const routes = [
    {
        path: '/',
        name: 'home',
        component: <Home />,
    },
    {
        path: '/about',
        name: 'about',
        component: <About />,
    },
    {
        path: '*',
        name: '404',
        component: <NotFound404 />,
    },
];
const router = new HashRouter();
// 監(jiān)聽change事件
router.on('change', (currentUrl, lastUrl) => {
    let route = null;
    // 匹配路由
    for (let i = 0, len = routes.length; i < len; i++) {
        const item = routes[i];
        if (currentUrl === item.path) {
            route = item;
            break;
        }
    }
    // 若沒有匹配到，則使用最后一個路由
    if (!route) {
        route = routes[routes.length - 1];
    }
    // 渲染當(dāng)前的組件
    ReactDOM.render(route.component, document.getElementById('app'));
});

hash 路由的樣例

html代碼：

<div class="container">
    <nav>
        <p><a href="#/">home</a></p>
        <p><a href="#/article">article</a></p>
        <p><a href="#/archive#a=1">archive#a=1</a></p>
        <p><a href="#/about">about</a></p>
    </nav>
    <div id="app"></div>
</div>

js代碼：

const { useState, useEffect, useMemo } = React;

const Home = () => {
    const [count, setCount] = useState(0);
    const [nowtime, setNowtime] = useState(0);
    const sum = useMemo(() => ((1 + count) * count) / 2 + " ,random: " + Math.random(), [count]);

    return (
        <div>
            <h1>Home Page</h1>
            <p> count: {count}</p>
            <p> sum: {sum}</p>
            <p> nowtime: {nowtime}</p>
            <button onClick={() => setCount(count + 1)}> add 1 </button>
            <button onClick={() => setNowtime(Date.now())}> set now time </button>
        </div>
    );
};
const About = () => {
    return (
        <div>
            <h1>About Page</h1>
        </div>
    );
};
const NotFound404 = () => {
    return (
        <div>
            <h1>404 Page</h1>
        </div>
    );
};
// ReactDOM.render(<Home />, document.getElementById("app"));
const routes = [
    {
        path: "/",
        name: "home",
        component: <Home />,
    },
    {
        path: "/about",
        name: "about",
        component: <About />,
    },
    {
        path: "*",
        name: "404",
        component: <NotFound404 />,
    },
];
const router = new HashRouter();
router.on("change", (currentUrl, lastUrl) => {
    console.log(currentUrl, lastUrl);
    let route = null;
    for (let i = 0, len = routes.length; i < len; i++) {
        const item = routes[i];
        if (currentUrl === item.path) {
            route = item;
            break;
        }
    }
    if (!route) {
        route = routes[routes.length - 1];
    }
    ReactDOM.render(route.component, document.getElementById("app"));
});

2. history 路由

在 history 路由中，我們一定會使用window.history中的方法，常見的操作有：
1.back()：后退到上一個路由；

2.forward()：前進(jìn)到下一個路由，如果有的話；

3.go(number)：進(jìn)入到任意一個路由，正數(shù)為前進(jìn)，負(fù)數(shù)為后退；

4.pushState(obj, title, url)：前進(jìn)到指定的 URL，不刷新頁面；

5.replaceState(obj, title, url)：用 url 替換當(dāng)前的路由，不刷新頁面；
調(diào)用這幾種方式時，都會只是修改了當(dāng)前頁面的 URL，頁面的內(nèi)容沒有任何的變化。但前 3 個方法只是路由歷史記錄的前進(jìn)或者后退，無法跳轉(zhuǎn)到指定的 URL；而pushState和replaceState可以跳轉(zhuǎn)到指定的 URL。如果有面試官問起這個問題“如何僅修改頁面的 URL，而不發(fā)送請求”，那么答案就是這 5 種方法。

如果服務(wù)端沒有新更新的 url 時，一刷新瀏覽器就會報錯，因為刷新瀏覽器后，是真實地向服務(wù)器發(fā)送了一個 http 的網(wǎng)頁請求。因此若要使用 history 路由，需要服務(wù)端的支持。

2.1 應(yīng)用的場景

pushState 和 replaceState 兩個方法跟 location.href 和 location.replace 兩個方法有什么區(qū)別呢？應(yīng)用的場景有哪些呢？

1.location.href 和 location.replace 切換時要向服務(wù)器發(fā)送請求，而 pushState 和 replace 僅修改 url，除非主動發(fā)起請求；

2.僅切換 url 而不發(fā)送請求的特性，可以在前端渲染中使用，例如首頁是服務(wù)端渲染，二級頁面采用前端渲染；

3.可以添加路由切換的動畫；

4.在瀏覽器中使用類似抖音的這種場景時，用戶滑動切換視頻時，可以靜默修改對應(yīng)的 URL，當(dāng)用戶刷新頁面時，還能停留在當(dāng)前視頻。

2.2 無法監(jiān)聽路由的變化

當(dāng)我們用 history 的路由時，必然要能監(jiān)聽到路由的變化才行。全局有個popstate事件，別看這個事件名稱中有個 state 關(guān)鍵詞，但pushState和replaceState被調(diào)用時，是不會觸發(fā)觸發(fā) popstate 事件的，只有上面列舉的前 3 個方法會觸發(fā)。可以點擊【popState 不會觸發(fā) popstate 事件】查看。
針對這種情況，我們可以使用window.dispatchEvent添加事件：

const listener = function (type) {
    var orig = history[type];
    return function () {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
window.history.pushState = listener('pushState');
window.history.replaceState = listener('replaceState');

然后就可以添加對這兩個方法的監(jiān)聽了：

window.addEventListener('pushState', this.refresh, false);
window.addEventListener('replaceState', this.refresh, false);

2.3 完整的代碼

class HistoryRouter {
    currentUrl = '';
    handlers = {};

    constructor() {
        this.refresh = this.refresh.bind(this);
        this.addStateListener();
        window.addEventListener('load', this.refresh, false);
        window.addEventListener('popstate', this.refresh, false);
        window.addEventListener('pushState', this.refresh, false);
        window.addEventListener('replaceState', this.refresh, false);
    }
    addStateListener() {
        const listener = function (type) {
            var orig = history[type];
            return function () {
                var rv = orig.apply(this, arguments);
                var e = new Event(type);
                e.arguments = arguments;
                window.dispatchEvent(e);
                return rv;
            };
        };
        window.history.pushState = listener('pushState');
        window.history.replaceState = listener('replaceState');
    }
    refresh(event) {
        this.currentUrl = location.pathname;
        this.emit('change', location.pathname);
        document.querySelector('#app span').innerHTML = location.pathname;
    }
    on(evName, listener) {
        this.handlers[evName] = listener;
    }
    emit(evName, ...args) {
        const handler = this.handlers[evName];
        if (handler) {
            handler(...args);
        }
    }
}
const router = new HistoryRouter();
router.on('change', function (curUrl) {
    console.log(curUrl);
});