前端路由主要有兩種實現方式

1、location.hash+hashchange事件。

2、history.pushState()+popstate事件。

第一種、location.hash+hashchange

這種方式的優勢就是瀏覽器相容性較好。

當頁面url地址發生改變時，location.hash獲取hash值，比如"www.xxx.com/#/home"，location.hash的值為"#/home"，如果是"www.xxx.com"，location.hash則為空。hashchange事件監聽hash值，然後根據這個值來匹配設定好的路由規則。看程式碼

router.js

function Router(){
    //路由目錄
    this.routes = {};
    //當前url地址
    this.currentUrl = '';
    this.init();
}
//新增路由規則
Router.prototype.route = function(path, cb){
    //儲存path對應的回撥函式
    this.routes[path] = cb || function(){};
}
//路由重新整理
Router.prototype.refresh = function(){
    //獲取當前url的hash值
    this.currentUrl = location.hash.slice(1) || '/';
    console.log(this, this.currentUrl)
    //執行當前路由回撥函式
    this.routes[this.currentUrl] && this.routes[this.currentUrl]();
}
//視窗監視
Router.prototype.init = function(){
    //視窗監視hash變化事件，從而自動觸發該路由規則
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
 

index.html

<a href="#/">首頁</a>
<a href="#/news">新聞頁</a>

<script>
        var router = new Router();
        router.route('/', function(){
            var div = document.querySelector('#content');
            div.innerHTML = '<h2>這是首頁</h2>';
        })
        router.route('/news', function(){
            var div = document.querySelector('#content');
            div.innerHTML = '<h2>這是新聞頁</h2>';
        })
</script>