91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue-router源碼之history類的淺析

發布時間:2020-09-14 15:22:49 來源:腳本之家 閱讀:185 作者:fuqihan 欄目:web開發

當前版本: 3.0.3

類目錄: src/history/base.js

前言:

對于vue-router來說,有三種路由模式history,hash,abstract, abstract是運行在沒有window的環境下的,這三種模式都是繼承于history類,history實現了一些共用的方法,對于一開始看vue-router源碼來說,可以從這里開始看起。

初始屬性

router: Router; 表示VueRouter實例。實例化History類時的第一個參數
 base: string;  表示基路徑。會用normalizeBase進行規范化。實例化History類時的第二個參數。
 current: Route; 表示當前路由(route)。
 pending: ?Route; 描述阻塞狀態。
 cb: (r: Route) => void; 監聽時的回調函數。
 ready: boolean; 描述就緒狀態。
 readyCbs: Array<Function>; 就緒狀態的回調數組。
 readyErrorCbs: Array<Function>; 就緒時產生錯誤的回調數組。
 errorCbs: Array<Function>; 錯誤的回調數組

 // implemented by sub-classes
 <!-- 下面幾個是需要子類實現的方法,這里就先不說了,之后寫其他類實現的時候分析 -->
 +go: (n: number) => void;
 +push: (loc: RawLocation) => void;
 +replace: (loc: RawLocation) => void;
 +ensureURL: (push?: boolean) => void;
 +getCurrentLocation: () => string;

對于history類來說,主要是下下面兩個函數的邏輯

transitionTo

這個方法主要是對路由跳轉的封裝, location接收的是HTML5History,HashHistory,AbstractHistory, onComplete是成功的回調,onAbort是失敗的回調

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const route = this.router.match(location, this.current) // 解析成每一個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

這是方法是確認跳轉,route是匹配的路由對象, onComplete是匹配成功的回調, 是匹配失敗的回調

confirmTransition(route: Route, onComplete: Function, onAbort?: Function) {
    const current = this.current
    const abort = err => { // 異常處理函數
      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 鉤子函數
      extractLeaveGuards(deactivated),
      // 全局的beforeHooks勾子
      this.router.beforeHooks,
      // beforeRouteUpdate 鉤子函數調用
      extractUpdateHooks(updated),
      // config里的勾子
      activated.map(m => m.beforeEnter),
      // async components
      resolveAsyncComponents(activated)
    )
    
    this.pending = route
    <!-- 對于queue數組所執行的迭代器方法 -->
    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
      <!-- beforeRouteEnter 鉤子函數調用 -->
      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
      const queue = enterGuards.concat(this.router.resolveHooks)
      <!-- 迭代運行queue -->
      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() })
          })
        }
      })
    })
  }

結語:

每一次總結,都是對之前讀源碼的再一次深入的了解

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

海盐县| 新丰县| 老河口市| 南华县| 吴旗县| 唐海县| 巫山县| 珲春市| 齐齐哈尔市| 温州市| 库尔勒市| 内乡县| 贡嘎县| 莱芜市| 黔西| 即墨市| 陇川县| 抚宁县| 龙游县| 天柱县| 长治县| 高密市| 昭平县| 嵩明县| 景洪市| 普格县| 贵阳市| 博白县| 惠安县| 宁津县| 卓资县| 桦甸市| 台湾省| 宝丰县| 赤城县| 白河县| 咸丰县| 时尚| 长武县| 宣城市| 麻江县|