新しい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の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する
>>: Dockerを使用してNextCloudネットワークディスクを展開する方法
この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...
序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...
多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...
クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを...
1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...
概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...
前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...
zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...
効果:スライドショーが一方向に動く場合、各画像のサイズ、位置、透明度、レベルを変更する必要があります...
CMakeをインストール sudo apt をインストール cmake この方法はインストールが簡単...
最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...
今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理...
目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....
この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...