當(dāng)前版本: 3.0.3
磐安ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書(shū)未來(lái)市場(chǎng)廣闊!成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18980820575(備注:SSL證書(shū)合作)期待與您的合作!
類(lèi)目錄: src/history/base.js
前言:
對(duì)于vue-router來(lái)說(shuō),有三種路由模式history,hash,abstract, abstract是運(yùn)行在沒(méi)有window的環(huán)境下的,這三種模式都是繼承于history類(lèi),history實(shí)現(xiàn)了一些共用的方法,對(duì)于一開(kāi)始看vue-router源碼來(lái)說(shuō),可以從這里開(kāi)始看起。
初始屬性
router: Router; 表示VueRouter實(shí)例。實(shí)例化History類(lèi)時(shí)的第一個(gè)參數(shù) base: string; 表示基路徑。會(huì)用normalizeBase進(jìn)行規(guī)范化。實(shí)例化History類(lèi)時(shí)的第二個(gè)參數(shù)。 current: Route; 表示當(dāng)前路由(route)。 pending: ?Route; 描述阻塞狀態(tài)。 cb: (r: Route) => void; 監(jiān)聽(tīng)時(shí)的回調(diào)函數(shù)。 ready: boolean; 描述就緒狀態(tài)。 readyCbs: Array; 就緒狀態(tài)的回調(diào)數(shù)組。 readyErrorCbs: Array ; 就緒時(shí)產(chǎn)生錯(cuò)誤的回調(diào)數(shù)組。 errorCbs: Array ; 錯(cuò)誤的回調(diào)數(shù)組 // implemented by sub-classes +go: (n: number) => void; +push: (loc: RawLocation) => void; +replace: (loc: RawLocation) => void; +ensureURL: (push?: boolean) => void; +getCurrentLocation: () => string;
對(duì)于history類(lèi)來(lái)說(shuō),主要是下下面兩個(gè)函數(shù)的邏輯
transitionTo
這個(gè)方法主要是對(duì)路由跳轉(zhuǎn)的封裝, location接收的是HTML5History,HashHistory,AbstractHistory, onComplete是成功的回調(diào),onAbort是失敗的回調(diào)
transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) { const route = this.router.match(location, this.current) // 解析成每一個(gè)location需要的route this.confirmTransition(route, () => { this.updateRoute(route) onComplete && onComplete(route) this.ensureURL() // fire ready cbs once if (!this.ready) { this.ready = true this.readyCbs.forEach(cb => { cb(route) }) } }, err => { if (onAbort) { onAbort(err) } if (err && !this.ready) { this.ready = true this.readyErrorCbs.forEach(cb => { cb(err) }) } }) }
confirmTransition
這是方法是確認(rèn)跳轉(zhuǎn),route是匹配的路由對(duì)象, onComplete是匹配成功的回調(diào), 是匹配失敗的回調(diào)
confirmTransition(route: Route, onComplete: Function, onAbort?: Function) { const current = this.current const abort = err => { // 異常處理函數(shù) if (isError(err)) { if (this.errorCbs.length) { this.errorCbs.forEach(cb => { cb(err) }) } else { warn(false, 'uncaught error during route navigation:') console.error(err) } } onAbort && onAbort(err) } if ( isSameRoute(route, current) && // in the case the route map has been dynamically appended to route.matched.length === current.matched.length ) { this.ensureURL() return abort() } const { updated, deactivated, activated } = resolveQueue(this.current.matched, route.matched) const queue: Array<?NavigationGuard> = [].concat( // beforeRouteLeave 鉤子函數(shù) extractLeaveGuards(deactivated), // 全局的beforeHooks勾子 this.router.beforeHooks, // beforeRouteUpdate 鉤子函數(shù)調(diào)用 extractUpdateHooks(updated), // config里的勾子 activated.map(m => m.beforeEnter), // async components resolveAsyncComponents(activated) ) this.pending = route const iterator = (hook: NavigationGuard, next) => { if (this.pending !== route) { return abort() } try { hook(route, current, (to: any) => { if (to === false || isError(to)) { // next(false) -> abort navigation, ensure current URL this.ensureURL(true) abort(to) } else if ( typeof to === 'string' || (typeof to === 'object' && ( typeof to.path === 'string' || typeof to.name === 'string' )) ) { // next('/') or next({ path: '/' }) -> redirect abort() if (typeof to === 'object' && to.replace) { this.replace(to) } else { this.push(to) } } else { // confirm transition and pass on the value next(to) } }) } catch (e) { abort(e) } } runQueue(queue, iterator, () => { const postEnterCbs = [] const isValid = () => this.current === route const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid) const queue = enterGuards.concat(this.router.resolveHooks) runQueue(queue, iterator, () => { if (this.pending !== route) { return abort() } this.pending = null onComplete(route) if (this.router.app) { this.router.app.$nextTick(() => { postEnterCbs.forEach(cb => { cb() }) }) } }) }) }
結(jié)語(yǔ):
每一次總結(jié),都是對(duì)之前讀源碼的再一次深入的了解
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。