Vueのハッシュジャンプ原理の詳細な説明

クラスVueRouter{
 コンストラクタ(オプション){
  this.matcher = createMatcher(options.routes || []);
//ここではハッシュモードを説明するために、ユーザーがどのモードを渡したかは判断しません。this.history = new HashHistory(this); //この vue-router インスタンス}
}

'./base' から履歴をインポートします
// ハッシュルーティングエクスポートデフォルトクラスHashHistoryはHistoryを拡張します{
 コンストラクタ(ルータ){
  super(router); //継承して親クラスを呼び出すと、呼び出しと同じになります
 }
}
// ルーティングの基本クラス export default class History {
 コンストラクタ(ルータ){
  this.router = ルーター;
 }
}

'./base' から History をインポートします。
関数ensureSlash(){ 
 if(window.location.hash){
  戻る 
 }
 ウィンドウ.location.hash = '/'
}
エクスポートデフォルトクラスHashHistoryはHistoryを拡張します{
 コンストラクタ(ルータ){
  スーパー(ルーター);
  EnsureSlash(); // ハッシュがあることを確認する
 }
}

init(アプリ){
  定数 history = this.history;
  // 初期化するときは、まず現在のパスを取得してマッチングロジックを実行する必要があります // ルーティングシステムを特定のパスに遷移させます const setupHashListener = ()=> {
   history.setupListener(); // パスの変更をリッスンする}
  history.transitionTo( // 親クラスはジャンプを担当するメソッドを提供します history.getCurrentLocation(), // サブクラスは対応するパスを取得します // ジャンプが成功したら、ビューの更新に備えてパスリスナーを登録します setupHashListener
  ）
}

関数 getHash(){
 window.location.hash.slice(1) を返します。
}
エクスポートデフォルトクラスHashHistoryはHistoryを拡張します{
 // ...
 現在の場所を取得します（）{
  getHash() を返します。
 }
}

エクスポートデフォルトクラスHashHistoryはHistoryを拡張します{
 // ...
 セットアップリスナー(){
  window.addEventListener('ハッシュ変更', ()=> {
   // 現在のハッシュ値に応じて対応するパスに遷移します。this.transitionTo(getHash());
  })
 }
}

エクスポート関数 createRoute(record, location) { // {path:'/',matched:[record,record]}
 res = [] とします。
 if (record) { // レコードがある場合 while (record) {
   res.unshift(record); // 現在のレコードの親を先頭に配置する record = record.parent
  }
 }
 戻る {
  ...位置、
  一致: res
 }
}
デフォルトクラス履歴をエクスポートする {
 コンストラクタ(ルータ) {
  this.router = ルーター;
  // レコードとパスに基づいてオブジェクトを返します。これは後でルータビューのマッチングに使用されます。this.current = createRoute(null, {
   パス： '/'
  })
 }
 // コアロジック transitionTo(location, onComplete) {
  // パスを一致させるには、let route = this.router.match(location);
  // 同じパスを遷移する必要はありません if(
   場所 === ルート.パス && 
   ルートに一致した長さ === this.current.matched.length){
   戻る 
  }
  //ルートを更新し、ルートインスタンスの_route属性を以下のように変更します。this.updateRoute(route)
  onComplete と onComplete();
 }
}

デフォルトクラスVueRouterをエクスポートする{
 // ...
 //プロキシマッチを作成する(場所){
  this.matcher.match(location) を返します。
 }
}

function match(location){ // 後でパスに基づいて対応するレコードを検索します let record = pathMap[location]
 if (record) { // レコードに従って対応するルートを作成します //パラメータ: /about/a:{path:xx,component...},path:'/about/a'
  createRoute(レコード,{を返す
   パス:場所
  })
 }
 // 一致するものが見つからない場合は、空の一致を返します return createRoute(null, {
  パス: 場所
 })
}

インストール(Vue) {
 Vue.mixin({ // すべてのコンポーネントのライフサイクルにbeforeCreateメソッドを追加しますbeforeCreate() {
   if (this.$options.router) { 
   //Vue クラスの双方向データ バインディング メソッドを呼び出します。Vue.util.defineReactive(this,'_route',this._router.history.current);
   } 
  }
 });
 // $route と $router メソッドは、Vue で最も一般的なプロキシです。これらは利便性のためだけのものです。Object.defineProperty(Vue.prototype,'$route',{ // 各インスタンスは $route プロパティを取得できます get(){
   return this._routerRoot._route; //上記で双方向データバインディングを実行しました}
 });
 Object.defineProperty(Vue.prototype,'$router',{ // 各インスタンスはルーターを取得できます instanceget(){
   this._routerRoot._router を返します。
  }
 })
 }

history.listen((route) => { // _route属性を更新し、関数を開始および終了する必要があります。app._route = route
});

デフォルトクラス履歴をエクスポートする {
 コンストラクタ(ルータ) {
  // ...
  this.cb = null;
 }
 聞く(cb){
  this.cb = cb; //関数を登録する}
 ルートを更新します(ルート){
  this.current =ルート;
  this.cb && this.cb(route); // 現在の更新後に _route プロパティを更新します}
}