簡單實現一個vue-route

vue-route 是什麼

Vue Router 是 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);

簡單實現一個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 一個簡單的路由實現完畢，喜歡的點擊贊吧