WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分

Vue.mixin({
 作成前() {
 if (isDef(this.$options.router)) {
 this._routerRoot = これ
 this._router = this.$options.router
 this._router.init(これ)
 Vue.util.defineReactive(this, '_route', this._router.history.current)
 } それ以外 {
 this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
 }
 インスタンスを登録します(これ、これ)
 },
 // テキスト全体を通じて、... は省略されたメソッドを示すために使用されます...
});

...
'./install' から {install} をインポートします。
'./history/hash' から {HashHistory} をインポートします。
'./history/html5' から {HTML5History} をインポートします。
...
デフォルトクラスVueRouterをエクスポートします。
 静的インストール: () => void;
 コンストラクタ（オプション：RouterOptions = {}）{
 if (this.fallback) {
 モード = 'ハッシュ'
 }
 ブラウザ内で
 モード = '抽象'
 }
 this.mode = モード
  
 スイッチ（モード）{
 ケース「履歴」:
 this.history = 新しい HTML5History(this、options.base)
 壊す
 ケース 'ハッシュ':
 this.history = 新しい HashHistory(this、options.base、this.fallback)
 壊す
 ケース「抽象」:
 this.history = 新しい AbstractHistory(this、options.base)
 壊す
 デフォルト：
 process.env.NODE_ENV !== 'production' の場合 {
 assert(false, `無効なモード: ${mode}`)
 }
 }
 }
}

'./components/view' から View をインポートします。
'./components/link' から Link をインポートします。
...
Vue.component('RouterView', ビュー);
Vue.component('RouterLink', リンク);

定数ハンドラ = e => {
 ガードイベントの場合(e)
 （これを置き換える）{
 router.replace(場所、noop)
 } それ以外 {
 router.push(場所、noop)
 }
 }
};

'../util/push-state' から { pushState、replaceState、supportsPushState } をインポートします。
...
エクスポートクラスHashHistoryはHistoryを拡張します{
 セットアップリスナー() {
 ...
 const ハンドルルーティングイベント = () => {
 定数 current = this.current
 if (!ensureSlash()) {
  戻る
 }
 // 親クラス History のジャンプメソッドは transitionTo によって呼び出され、ジャンプ後にパスがハッシュ化されます this.transitionTo(getHash(), route => {
  スクロールをサポートする場合
  handleScroll(this.router, ルート, 現在の, true)
  }
  プッシュ状態をサポートする場合
  ハッシュを置換(ルート.fullPath)
  }
 })
 }
 const eventType = supportsPushState ? 'popstate' : 'hashchange'
 ウィンドウにイベントリスナーを追加します(
 イベントタイプ、
 ルーティングイベントの処理
 ）
 this.listeners.push(() => {
 window.removeEventListener(イベントタイプ、handleRoutingEvent)
 })
 }
 
 プッシュ (場所: RawLocation、onComplete?: Function、onAbort?: Function) {
 const { current: fromRoute } = this
 this.transitionTo() は、
 位置、
 ルート => {
 pushHash(ルート.fullPath)
 handleScroll(this.router, ルート, fromRoute, false)
 onComplete && onComplete(ルート)
 },
 中止時
 ）
 }
}
...

// 受信したパスをハッシュ化された URL に処理します
関数 getUrl (パス) {
 定数 href = window.location.href
 定数 i = href.indexOf('#')
 定数基数 = i >= 0 ? href.slice(0, i) : href
 `${base}#${path}` を返します
}
...

// ハッシュを置き換える
関数pushHash(パス){
 (PushStateをサポートする)の場合{
 pushState(getUrl(パス))
 } それ以外 {
 window.location.hash = パス
 }
}

//util/push-state.js ファイル内のメソッド export const supportsPushState =
 ブラウザ内 &&
 （関数 （） {
 定数 ua = window.navigator.userAgent

 もし （
 (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
 ua.indexOf('モバイルSafari') !== -1 &&
 ua.indexOf('Chrome') === -1 &&
 ua.indexOf('Windows Phone') === -1
 ）{
 偽を返す
 }
 window.history を返します && typeof window.history.pushState === 'function'
 })()

'../util/push-state' から {pushState、replaceState、supportsPushState} をインポートします。
...
エクスポートクラス HTML5History は History を拡張します {

 セットアップリスナー() {

 const ハンドルルーティングイベント = () => {
 現在の状態を定数で表す。
 定数 location = getLocation(this.base);
 if (this.current === START && location === this._startLocation) {
 戻る
 }

 this.transitionTo(場所、ルート => {
 スクロールをサポートする場合
 handleScroll(ルーター、ルート、現在、true)
 }
 })
 }
 window.addEventListener('popstate', handleRoutingEvent)
 this.listeners.push(() => {
 window.removeEventListener('popstate', handleRoutingEvent)
 })
 }
 プッシュ (場所: RawLocation、onComplete?: Function、onAbort?: Function) {
 const { current: fromRoute } = this
 this.transitionTo(場所、ルート => {
 pushState(cleanPath(this.base + route.fullPath))
 handleScroll(this.router, ルート, fromRoute, false)
 onComplete && onComplete(ルート)
 }, 中止時)
 }
}

...

//util/push-state.js ファイルのメソッドエクスポート function pushState (url?: string, replace?: boolean) {
 スクロール位置を保存します。
 定数履歴 = window.history
 試す {
 （置換）の場合{
 const stateCopy = extend({}, history.state)
 stateCopy.key = getStateKey()
 history.replaceState(stateCopy, ''、url)
 } それ以外 {
 history.pushState({ キー: setStateKey(genStateKey()) }, '', url)
 }
 } キャッチ (e) {
 window.location[replace ? 'replace' : 'assign'](url)
 }
}

エクスポートクラス履歴{
 ...
 遷移先 (
 場所: RawLocation、
 onComplete?: 関数、
 onAbort?: 関数
 ）{
 const ルート = this.router.match(場所、this.current)
 this.confirmTransition() は、
 ルート、
 () => {
 定数 prev = this.current
 this.updateRoute(ルート)
 onComplete && onComplete(ルート)
 this.ensureURL()
 this.router.afterHooks.forEach(フック => {
  フック && フック(ルート、前)
 })

 準備ができたら
  this.ready = true
  this.readyCbs.forEach(cb => {
  cb(ルート)
  })
 }
 },
 エラー => {
 中止の場合
  中止(エラー)
 }
 もしエラーなら、this.ready です。
  this.ready = true
  // https://github.com/vuejs/vue-router/issues/3225
  if (!isRouterError(err, NavigationFailureType.redirected)) {
  this.readyErrorCbs.forEach(cb => {
  cb(エラー)
  })
  } それ以外 {
  this.readyCbs.forEach(cb => {
  cb(ルート)
  })
  }
 }
 }
 ）
 }
 ...
}