vue-route 是什麼

vueRouter 是 Vue.js官方的路由管理器。在早期的時候html模板存在服務端，然後根據瀏覽器輸入不同的路徑，服務端會根據不同的路徑渲染不同的模板出來，這樣的痛點就是使用者每次操作的時候都要重新重新整理頁面，比如說很久之前的論壇，操作一下就要跳一下，互動體驗很是不好，緊接著出現了Ajax非同步載入，但多頁面的跳轉還是有些不盡人意，所以便有了spa應用，也就是前端路由，vue-route就是一個比較火的基於前端路由的原理實現的一個外掛

hash模式

hash模式主要是根據監聽瀏覽器hash值的變化，做出對應的 動作來實現的，hash的值就是url後邊#後邊的那一塊，用過vue的想必比較熟悉了

好， 下邊我們開啟控制檯

//在控制檯輸入這句話，定義一下hashchange的回撥事件
window.onhashchange=()=>{ 
        console.log(1)
}

定義好這個事件之後當我們瀏覽器的hash值發生變化的時候控制檯就會列印一個1

我們實驗一下

//假設我們定義了一個路徑叫route
location.hash='/route'

講到這裡那剩下的就很簡單了，hash模式的前端路由我們只需要在hash發生改變的時候給頁面的根節點上渲染出我們想要的html就可以了

簡單實現一個hash模式路由

首先假設我們有個div是根節點，然後他有個id叫app，我們寫一個路由類讓他監聽hash

// 獲取這個app
const  _EL  =  document.querySelector('#app');

class HashRouter {
    constructor(routeList) {
        this.routeList = routeList;   
        window.addEventListener('hashchange', e => {

        });
    }
}

然後發生改變的時候需要重新渲染頁面

    //渲染方法
    render(routePath) {
    
        //獲取元件
        let { component } = this.list.find(el => el.path == routePath);
  
        if ( !component )return
        
        //渲染
        _EL.innerText = component;

    }
 

然後我們在發生改變的時候獲取到當前的hash並呼叫渲染函式

        // 這個和onhashchange 是一樣的，感覺這樣寫會優雅一點
        
        window.addEventListener('hashchange', e => {

            this.reSetRender();
            
        });
           
        // 渲染當前元件
        reSetRender(){
        
            let path = location.hash.slice(1)||'/'
            
            this.render(path)
            
        }

最後實現一下hash模式路由的常用api

push(routePath) { 

    location.hash = routePath; 
    
}


replace(path) { 
    
    let href = window.location.href; 
    
    let url = href.split('#')[0]; 
    
    location.replace(`${url}#${path}`); 

}

go(n) {

     history.go(n);

}

到此hash模式的路由就算是簡單的實現完畢了

//假裝這裡有一個路由陣列配置
const routeList = [XXXXXX.....]
const $router = new HashRouter(routeList);

資源搜尋網站大全 https://www.renrenfan.com.cn

簡單實現一個history模式路由

History物件是瀏覽器歷史棧的一個介面，他裡邊都是和瀏覽器的歷史棧操作有關的api

在window物件上邊有一個onpopstate事件，這個事件會在歷史棧發生改變的時候觸發，這個事件在微信小程式的H5 裡邊有時候格外的有用，在微信小程式不能重新整理H5，然後左上角的回退按鈕，可以用這個事件進行一些操作

注意 這個onpopstate事件並不會在你手動更改history的時候觸發，他只會在瀏覽器本身做出動作的時候才會被觸發，比如pushState（），這個方法瀏覽器會做出反應，但是並不會觸發該事件。

history模式路由程式碼實現和上邊hash實現大同小異，不一樣的地方就是在pushState和replaceState方法中需要手動呼叫一下渲染函式，具體程式碼如下

// 建構函式裡邊監聽popstate事件

window.addEventListener('popstate', e \=> {

    this.handler();

});

// api 實現
push(path) {

    history.pushState(null, null, path);

    this.reSetRender();

}

replace(path) {

    history.replaceState(null, null, path);

    this.reSetRender();

}

go(num) {

    window.history.go(num);

}

history模式訪問的是真實的路由地址，如果沒有配置的話重新整理的時候會報404

so 一個簡單的路由實現完畢