vue router實現攔截和類似github的頁面加載

daryl 發布于2019-08-20 14:26 / 2038人閱讀

摘要：最近想寫個簡單來練習下全家桶，其中特別想實現類似的頁面加載行為。翻了下，提供導航鉤子給開發者實現導航攔截但實驗后發現，當鉤子執行的時候的狀態已經改變而且難以實現進度條。

0x00

最近想寫個簡單blog來練習下vue全家桶，其中特別想實現類似github的頁面加載行為。

0x01

翻了下api，vue-router提供導航鉤子給開發者實現導航攔截

router.beforeEach((to, from, next) => {  })

但實驗后發現，當鉤子執行的時候url／hash的狀態已經改變而且難以實現進度條。

0x02

翻查源代碼后發現更改url主要是在history實例中進行，其中history暴露一個listen的方法來監聽路由的改變從而更新vue的root元素的路由值。

    history.listen(route => {
      this.app._route = route
    })

在這里只要延遲_route的賦值就能延遲UI和url的更新，甚至能替換路由

0x03

最終代碼，這里沒有用作進度條，配合store可以實現類似github的進度條指示器，以及超時處理

// 定義一個正在加載的Route的訪問器
Object.defineProperty(Vue.prototype, "$routePending", {
    get () {
        return this.$root._routePending;
    }
});
//hook vm創建
Vue.mixin({
    /**
     * hook route updated
     */
    beforeCreate () {
        if (this.$options.router) {
            //定義一個響應式屬性
            Vue.util.defineReactive(this, "_routePending", null);
            //延遲賦值并做預加載
            this._router.history.listen(route => {
                this._routePending = route;
                Promise.resolve()
                    .then(() => {
                        //過濾非執行中的route
                        if (route != this._routePending) {
                            return;
                        }
                        if (route.matched) { //路由有匹配的組件
                            let reduce = route.matched.reduce((list, item) => {
                                Object.keys(item.components).forEach(k => {
                                    let component = item.components[k];
                                    if (component.preFetch) {
                                        list.push(component.preFetch); //所有組件的preFetch入列
                                    }
                                });
                                return list;
                            }, []);
                            if (reduce.length > 0) {
                                return Promise.all(reduce.map(fn => fn(route)));
                            }
                            return route;
                        }
                    })
                    .then(() => {
                        //過濾非執行中的route
                        if (route != this._routePending) {
                            return;
                        }
                        //
                        this._route = route;
                        this._routePending = null;
                    })
                    .catch(e => {
                        console.warn(e);
                        this._router.replace("/500");
                    });
            });
        }
    }
});

已知問題：

原來的導航鉤子可能出現問題

PS：文中很可能出現錯誤，這里給出一個思路

GPU云服務器云服務器 Vue Router vue-router java實現頁面加載阿里云服務器上傳用vue做好的頁面

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

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

前端路由原理解析和實現

摘要：如何實現前端路由要實現前端路由，需要解決兩個核心如何改變卻不引起頁面刷新如何檢測變化了下面分別使用和兩種實現方式回答上面的兩個核心問題。原文鏈接：github.com/whinc/blog/… 在單頁應用如此流行的今天，曾經令人驚嘆的前端路由已經成為各大框架的基礎標配，每個框架都提供了強大的路由功能，導致路由實現變的復雜。想要搞懂路由內部實現還是有些困難的，但是如果只想了解路由實現基本...

lavor 2019-05-23 16:28 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

Backache 2019-08-22 18:29 評論0 收藏0
記一次vue仿網易云音樂的單頁面應用

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

hqman 2019-08-26 18:24 評論0 收藏0
vue開發項目完全指南

摘要：有兩種方法，一種是在開發環境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統一管理在項目開發過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統一管理接口。這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理，性能優化等內容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0