新しい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ネットワークディスクを展開する方法
目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...
React 16の内容です。最新技術ではありませんが、ドキュメントで調べるまであまり話題に上がらなか...
次のコードは、Chrome による Cookie の変更の監視を導入しています。コードは次のとおりで...
フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...
前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...
Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...
目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...
1. rpm パッケージ経由でインストールされた MySQL サービスmysqldを再起動 /et...
結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...
この記事の例では、グラフィック検証コードを実装するためのVueの具体的なコードを参考までに共有してい...
1. どの 3 つの形式ですか?それぞれ、gif、jpg、png です。画像ファイルを最適化すること...
この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...
この記事では、divのドラッグ可能な高さを実現するためのVueの具体的なコードを参考までに共有します...