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

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

新しいvueRouterでは、3つの値を受け取ることができるモード属性を渡すことができます:hash/history/abstract

ハッシュと履歴の違い

履歴パスは http://yoursite.com/user/id のように、より美しくなります。履歴は pushState() に基づいており、ページを再読み込みせずに URL ジャンプを完了します。 ただし、強制更新では依然として問題が発生します (サーバーがこの問題を解決します) ので、履歴モードではバックエンド担当者の協力が必要です。

ハッシュパスには、http://yoursite.com#/user/id のように # が含まれます。

ハッシュ履歴

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

ここで、ソース コードは基本クラスを作成します。これをソース コードと統合します。この基本クラスは、3 つのモードの共通メソッドとプロパティをカプセル化します。次に、ここで HashHistory と基本クラス History を作成します。

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

ハッシュルートの場合、ウェブサイトを開いたときにハッシュがない場合は、デフォルトで#/が追加されます

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

初期化ロジック(上記のrouter.init関数)を見てみましょう。

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

ここではそれぞれtransitionTo(基本クラスメソッド)、getCurrentLocation、setupListenerを実装する必要があります。

getCurrentLocation の実装

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

setupListener 実装

エクスポートデフォルトクラス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 を返します。
  }
 })
 }

_route はインストール中に双方向にデータにバインドされ、最初に入力されたときには this._router.history.current がないため、スイッチ ルートが初期化されるたびに更新 _route メソッドを呼び出す必要があります。サブスクリプションと更新の操作は、publish-subscribe メソッドを通じて実行されます。init メソッドにリスニング関数を追加します。

history.listen((route) => { // _route属性を更新し、関数を開始および終了する必要があります。app._route = route
});
デフォルトクラス履歴をエクスポートする {
 コンストラクタ(ルータ) {
  // ...
  this.cb = null;
 }
 聞く(cb){
  this.cb = cb; //関数を登録する}
 ルートを更新します(ルート){
  this.current =ルート;
  this.cb && this.cb(route); // 現在の更新後に _route プロパティを更新します}
}

以上がVueのハッシュジャンプ原理の詳しい説明です。Vueのハッシュジャンプ原理についてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています
  • Vueプロジェクトでパラメータジャンプ機能を実装する
  • Vueページジャンプの実装方法
  • Vueはログイン、登録、終了、ジャンプなどの機能を実装します
  • Vue のルーティングは履歴操作にカウントされません
  • Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

<<:  MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

>>:  Dockerを使用してNextCloudネットワークディスクを展開する方法

推薦する

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

mysql8でルートユーザーのパスワードをリセットする手順を完了します

序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...

Linuxシステムはポート3306、8080などを外部に開放します。ファイアウォール設定の詳しい説明

多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...

CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。

クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを...

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...

Windows に MySQL をインストールする方法のグラフィック チュートリアル

概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...

Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...

MySQL 最適化 Zabbix パーティション最適化

zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...

HTML+CSS+JS でスタックカルーセル効果を実装するサンプルコード

効果:スライドショーが一方向に動く場合、各画像のサイズ、位置、透明度、レベルを変更する必要があります...

UbuntuにCMakeをインストールするいくつかの方法の詳細な説明

CMakeをインストール sudo apt をインストール cmake この方法はインストールが簡単...

アクセス速度を上げるためにウェブサイトを最適化する方法の更新

最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...

CSS クリアフロートクリア:both サンプルコード

今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理...

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....

複数の値を返す MySQL ストアド プロシージャ メソッドの例

この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...

...