自己動手實現一個前端路由

longshengwang 發布于2019-08-22 18:22 / 1540人閱讀

摘要：監聽的變動省略其他代碼省略其他代碼這樣，我們就初步實現了一個路由，那么接下來，我們來看看路由怎么實現。

前言

用過現代前端框架的同學，對前端路由一定不陌生, vue, react, angular 都有自己的 router, 那么你對 router 的工作原理了解嗎？
如果還不了解, 那么請跟我一起來手寫一個簡單的前端路由, 順便了解一下.

實現路由的2種方式

hash模式

history模式

缺點:

hash：丑(地址欄要多一個#), 某些特殊場景有坑 ,如微信支付回調

history: 兼容性較差, 直接訪問會400 ,除非后端或者服務器有做處理

基本原理

hash是基于監聽 hashchange 事件實現的，history 是基于 pushState 和 popState,

實現

由于history兼容性較差，而且實現方式基本沒多大區別，本文就以hash模式來實現，history的實現方式只實現不同的部分。



    
    Document

以上就是hash模式的最簡單實現，查看控制臺，可以看到不管是點擊跳轉按鈕，還是點擊瀏覽器的前進／后退按鈕，控制臺都會輸出當前頁面對應的 "url"，有了 "url"，我們就可以對內容做條件渲染了

我們在上面的代碼的基礎上，稍作修改一下，增加2個div,一個是login,一個是index



    
    Document

這樣，我們就能根據不同的hash地址，顯示不同的內容，是不是已經有點路由的味道了呢？但是目前還無法傳參，傳參的方式有很多種，最常見最通俗的，應該是query string 了吧？ query string 其實很簡單，解析url即可。

    // 監聽hash的變動
    window.addEventListener("hashchange", function (e) {
        let url = location.hash.slice(1) || "index"
        // 解析url
        let questionIndex = url.indexOf("?")
        let path, query
        if(questionIndex >= 0){
            path = url.substr(0,questionIndex)
            let queryString = url.substr(questionIndex+1)
            let queryArray = queryString.split("&")
            let queryObject = {}
            queryArray.map(str => {
                let equalIndex = str.indexOf("=")
                if(equalIndex > 0) {
                    let key = str.substr(0,equalIndex)
                    let value = str.substr(equalIndex+1)
                    queryObject[key] = value
                }
            })
            query = queryObject
        } else {
            path = url
            query = {}
        }
        
        console.log("接收到的參數", query)
        setVisible(path)
    })

這樣，我們就能獲取到URL上傳遞的query string , 還順便解決了傳參會導致路由解析不正確的bug.

傳參其實還有個更簡單的方法，就是設置一個全局變量 param，然后在需要傳值的時候，直接對param 賦值即可

    // 設置一個全局變量
    var param = {}

    // 頁面跳轉
    // 這個多了個參數 args
    function hashPush(url, args) {
        location.hash = "#" + url
        param = args
    }

由于是全局變量，所以可以在任意位置使用 param，不過這樣直接使用全局變量的方式，也有它的弱點，就是點擊返回按鈕的時候無法保存變量，而query string 因為是在 url 里面的，所以返回的時候，可以拿到上個頁面的 query string,
那我們有沒有辦法讓全局變量的方式也能保存上一個頁面的參數呢？我們來稍微修改一下代碼

    // 設置一個全局變量
    var param = {}

    // 頁面跳轉
    // 這個多了個參數 args
    function hashPush(url, args) {
        location.hash = "#" + url
        // 如果有傳args參數，就在 param 對象下建一個名字跟當前url一樣的對象，并把args賦值給它
        if(args) {
            param[url] = args
        }
    }

那我們在 hashchange 的時候，可以根據url來定位該頁面的參數。

    // 監聽hash的變動
    window.addEventListener("hashchange", function (e) {
        // 省略其他代碼
        args = param[path] || {}
        // 省略其他代碼
    })

這樣，我們就初步實現了一個hash路由，那么接下來，我們來看看history路由怎么實現。

history 模式

history 模式主要依靠調用 history.pushState() 方法和監聽 popstate 事件。

history.pushState() 方法接收3個參數：

要傳遞的數據（參數）

給頁面設置的標題（兼容性差，幾乎沒用）

url

我們看看調用實例

    history.pushState({id:1}, "我是頁面標題", url)

需要注意的是 pushState 的時候，并不會觸發 popstate 事件，只有在前進后退的時候，才會觸發，所以 pushState 之后，需要手動去設置頁面的相關狀態。如上面的例子，我們需要這樣做

    history.pushState({id:1}, "我是頁面標題", url)
    setVisible(url)

然后監聽 popstate 事件，捕獲前進／后退

 window.addEventListener("popstate",function (e) {
     // e.state 就是你 pushState 的時候，傳的第一個參數
     let state = e.state || {}  
     let url = state.target.location.pathName
     //  根據參數 做一些其他操作
  })

最后

本文最終實現代碼已經放在 github上，想要直接看效果的同學，可以上去直接copy，運行。

如果覺得本文對您有用，請給本文的github加個star,萬分感謝

另外，github上還有其他一些關于前端的教程和組件，有興趣的童鞋可以看看，你們的支持就是我最大的動力。

云服務器 GPU云服務器自己動手寫爬蟲自己動手寫網路爬蟲自己動手寫網絡爬蟲自己動手寫開發工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95794.html

自己動手實現一個前端路由

摘要：單頁面應用利用了動態變換網頁內容避免了頁面重載路由則提供了瀏覽器地址變化網頁內容也跟隨變化兩者結合起來則為我們提供了體驗良好的單頁面應用前端路由實現方式路由需要實現三個功能瀏覽器地址變化切換頁面點擊瀏覽器后退前進按鈕，網頁內容跟隨變化刷新瀏單頁面應用利用了JavaScript動態變換網頁內容,避免了頁面重載;路由則提供了瀏覽器地址變化,網頁內容也跟隨變化,兩者結合起來則為我們提供了體...

psychola 2019-08-26 13:22 評論0 收藏0
webpack+vue項目實戰（三，配置功能操作頁和組件的按需加載）

摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。 1.前言上篇文章（webpack+vue項目實戰（二，開發管理系統主頁面）），實現了，側邊欄的一個操作，點擊側邊欄的一些操作，最重要的就是路由的切換?？戳松弦黄幕锇橐膊浑y發現，除了點擊側邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 評論0 收藏0
記一次vue仿網易云音樂的單頁面應用

摘要：說明一直想做一個基于的項目但是因為項目往往要涉及到后端的知識不會后端真的苦所以就沒有一直真正的動手去做一個項目。直到發現上有網易云音樂的才開始動手去做。僅僅完成了首頁登入，歌單，歌曲列表頁。說明一直想做一個基于VUE的項目,但是因為項目往往要涉及到后端的知識(不會后端真的苦),所以就沒有一直真正的動手去做一個項目。直到發現GitHub上有網易云音樂的api NeteaseCloud...

hqman 2019-08-26 18:24 評論0 收藏0
使用next.js結合GITHUB ISSUE實現博客。

摘要：而更多的應用采用的是簡單的同構實現。請使用動態路由進行處理。后來用布署頻繁調試，發現自定義在上并不能用，看建議使用動態路由。如果要取消這種行為可以使用方法。利用動態實現代碼塊切片。如果使用的話，建議使用動態路由去做布署啦。使用next.js結合GITHUB ISSUE實現博客。起因。。。。起因是因為在某網站看到有一些類似實現。打算自己也做個side-project。習慣性的對自...

SillyMonkey 2019-08-26 10:48 評論0 收藏0
JS或Jquery

摘要：大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0