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ネットワークディスクを展開する方法

推薦する

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

Reactエラー境界コンポーネント処理

React 16の内容です。最新技術ではありませんが、ドキュメントで調べるまであまり話題に上がらなか...

ChromeはCookieの変更を監視し、値を割り当てます

次のコードは、Chrome による Cookie の変更の監視を導入しています。コードは次のとおりで...

ウェブページでグレーまたはブラックモードを実現するための CSS3 フィルターコード

フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...

MySQLクエリステートメント内のユーザー変数のコード分析

前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...

MySQL 5.7 インストール不要の設定グラフィックチュートリアル

Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

Vue3スタイルのCSS変数注入の実装

目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...

Javascript配列の重複排除のいくつかの方法の詳細な説明

目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...

CentOS で Mysql を再起動するさまざまな方法 (推奨)

1. rpm パッケージ経由でインストールされた MySQL サービスmysqldを再起動 /et...

Linux でのマルチスレッドおよびマルチプロセス クラッシュのシミュレーションに関する簡単な説明

結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...

Vueはグラフィック検証コードを実装する

この記事の例では、グラフィック検証コードを実装するためのVueの具体的なコードを参考までに共有してい...

画像ファイルの形式とその選択方法

1. どの 3 つの形式ですか?それぞれ、gif、jpg、png です。画像ファイルを最適化すること...

MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル(MAC)

この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...

Vue は div の高さをドラッグ可能にします

この記事では、divのドラッグ可能な高さを実現するためのVueの具体的なコードを参考までに共有します...