資訊專欄INFORMATION COLUMN
摘要：最近想寫個(gè)簡(jiǎn)單來(lái)練習(xí)下全家桶，其中特別想實(shí)現(xiàn)類似的頁(yè)面加載行為。翻了下，提供導(dǎo)航鉤子給開(kāi)發(fā)者實(shí)現(xiàn)導(dǎo)航攔截但實(shí)驗(yàn)后發(fā)現(xiàn)，當(dāng)鉤子執(zhí)行的時(shí)候的狀態(tài)已經(jīng)改變而且難以實(shí)現(xiàn)進(jìn)度條。
0x00
最近想寫個(gè)簡(jiǎn)單blog來(lái)練習(xí)下vue全家桶，其中特別想實(shí)現(xiàn)類似github的頁(yè)面加載行為。
0x01翻了下api，vue-router提供導(dǎo)航鉤子給開(kāi)發(fā)者實(shí)現(xiàn)導(dǎo)航攔截
router.beforeEach((to, from, next) => { })
但實(shí)驗(yàn)后發(fā)現(xiàn)，當(dāng)鉤子執(zhí)行的時(shí)候url／hash的狀態(tài)已經(jīng)改變而且難以實(shí)現(xiàn)進(jìn)度條。
0x02翻查源代碼后發(fā)現(xiàn)更改url主要是在history實(shí)例中進(jìn)行，其中history暴露一個(gè)listen的方法來(lái)監(jiān)聽(tīng)路由的改變從而更新vue的root元素的路由值。
history.listen(route => {
this.app._route = route
})
在這里只要延遲_route的賦值就能延遲UI和url的更新，甚至能替換路由
0x03最終代碼，這里沒(méi)有用作進(jìn)度條，配合store可以實(shí)現(xiàn)類似github的進(jìn)度條指示器，以及超時(shí)處理
// 定義一個(gè)正在加載的Route的訪問(wèn)器
Object.defineProperty(Vue.prototype, "$routePending", {
get () {
return this.$root._routePending;
}
});
//hook vm創(chuàng)建
Vue.mixin({
/**
* hook route updated
*/
beforeCreate () {
if (this.$options.router) {
//定義一個(gè)響應(yīng)式屬性
Vue.util.defineReactive(this, "_routePending", null);
//延遲賦值并做預(yù)加載
this._router.history.listen(route => {
this._routePending = route;
Promise.resolve()
.then(() => {
//過(guò)濾非執(zhí)行中的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(() => {
//過(guò)濾非執(zhí)行中的route
if (route != this._routePending) {
return;
}
//
this._route = route;
this._routePending = null;
})
.catch(e => {
console.warn(e);
this._router.replace("/500");
});
});
}
}
});
已知問(wèn)題：
原來(lái)的導(dǎo)航鉤子可能出現(xiàn)問(wèn)題
PS：文中很可能出現(xiàn)錯(cuò)誤，這里給出一個(gè)思路
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81635.html
摘要：如何實(shí)現(xiàn)前端路由要實(shí)現(xiàn)前端路由，需要解決兩個(gè)核心如何改變卻不引起頁(yè)面刷新如何檢測(cè)變化了下面分別使用和兩種實(shí)現(xiàn)方式回答上面的兩個(gè)核心問(wèn)題。 原文鏈接：github.com/whinc/blog/… 在單頁(yè)應(yīng)用如此流行的今天，曾經(jīng)令人驚嘆的前端路由已經(jīng)成為各大框架的基礎(chǔ)標(biāo)配，每個(gè)框架都提供了強(qiáng)大的路由功能，導(dǎo)致路由實(shí)現(xiàn)變的復(fù)雜。想要搞懂路由內(nèi)部實(shí)現(xiàn)還是有些困難的，但是如果只想了解路由實(shí)現(xiàn)基本...
摘要：其實(shí)就是我們開(kāi)始掛載上去的我們?cè)谶@里出去，我們就可以在回調(diào)里面只處理我們的業(yè)務(wù)邏輯，而其他如斷網(wǎng)超時(shí)服務(wù)器出錯(cuò)等均通過(guò)攔截器進(jìn)行統(tǒng)一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開(kāi)始之前 隨著業(yè)務(wù)的不斷累積，目前我們 ToC 端主要項(xiàng)目，除去 node_modules， bu...
摘要：其實(shí)就是我們開(kāi)始掛載上去的我們?cè)谶@里出去，我們就可以在回調(diào)里面只處理我們的業(yè)務(wù)邏輯，而其他如斷網(wǎng)超時(shí)服務(wù)器出錯(cuò)等均通過(guò)攔截器進(jìn)行統(tǒng)一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開(kāi)始之前 隨著業(yè)務(wù)的不斷累積，目前我們 ToC 端主要項(xiàng)目，除去 node_modules， bu...
摘要：說(shuō)明一直想做一個(gè)基于的項(xiàng)目但是因?yàn)轫?xiàng)目往往要涉及到后端的知識(shí)不會(huì)后端真的苦所以就沒(méi)有一直真正的動(dòng)手去做一個(gè)項(xiàng)目。直到發(fā)現(xiàn)上有網(wǎng)易云音樂(lè)的才開(kāi)始動(dòng)手去做。僅僅完成了首頁(yè)登入，歌單，歌曲列表頁(yè)。 說(shuō)明 一直想做一個(gè)基于VUE的項(xiàng)目,但是因?yàn)轫?xiàng)目往往要涉及到后端的知識(shí)(不會(huì)后端真的苦),所以就沒(méi)有一直真正的動(dòng)手去做一個(gè)項(xiàng)目。直到發(fā)現(xiàn)GitHub上有網(wǎng)易云音樂(lè)的api NeteaseCloud...
摘要：有兩種方法，一種是在開(kāi)發(fā)環(huán)境中設(shè)置通過(guò)的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問(wèn)接口就可以不加了，打包后訪問(wèn)也不用手動(dòng)去除統(tǒng)一管理在項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項(xiàng)目的所遇到的問(wèn)題，包括跨域、用戶認(rèn)證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項(xiàng)目github地址 : 前端 https:...
閱讀 1680·2021-10-29 13:11
閱讀 845·2021-09-22 10:02
閱讀 1702·2021-08-20 09:35
閱讀 1564·2019-08-30 15:54
閱讀 2470·2019-08-30 15:44
閱讀 1395·2019-08-29 16:52
閱讀 1111·2019-08-23 12:56
閱讀 770·2019-08-22 15:16
