同じページを動的にロードするための Vue ルーティングリスニングの例

シナリオ分析

システムでは、1 つのモジュールに 3 つのサブモジュールがあります。ビジネス データでは、3 つのサブモジュールをタイプに応じて直接区別できます。通常は、同じモジュールに書き込み、ビジネス タイプを選択します。ただし、所有者はこれを 3 つのメニューに分割することを要求しています。ユーザーは、ニーズに応じて使用するモジュールを選択できます。

これら 3 つのメニューは同じデータ テーブルを使用します。したがって、リスト、追加、編集ページを 1 つだけ記述する必要があります。次に、ページに入るルートに基づいて、どのカテゴリに属する​​かを判断します。そして、指定されたカテゴリの対応するリスト インターフェイス ページを追加、編集、および呼び出しにジャンプします。

発達

3 つのモジュールは同じページを使用するため、3 つのルートを設定し、ページを区別する必要があります。現在直面している問題は、3 つのメニューのルートは異なりますが、同じページであることです。メニューを切り替えると、Vue のフック関数がトリガーされません。すると、3 つのリスト ページによって照会されるデータは同じになり、照会メソッドがトリガーされず、条件を切り替えることができなくなります。

次に、インターネットで監視時間を検索しました。監視によってルートが変更されたときにリストデータの読み込みメソッドをトリガーできることが分かりました。具体的なコードは次のとおりです。

リストページのルートには、どのページであるかを区別するために、リストの後に 1、2、3 が追加されます。

時計：
    '$route.path': 関数 (newVal, oldVal) {
        // 新しいルーティング パス タイプと古いルーティング パス タイプのパラメーターは、グローバルに定義された 3 種類のメニューです。this.type = newVal.substr(newVal.lastIndexOf("/") + 1);
        this.search();
    }
},

その後、ルートを切り替えると、リスト データを再度取得できます。同時に、create メソッドは search も呼び出す必要があります。ルート監視はこのページでのみ機能するためです。他のページがこのメニューにルートを切り替えてもトリガーされません。

作成された（）{
    path を this.$route.path とします。
    this.type = path.substr(path.lastIndexOf("/") + 1);
    this.search();
},

要約する

実際の開発では、ニーズに応じて監視属性を選択できます。

時計：{  
    //ルートの変更を監視する $route( to , from ){   
       console.log( へ、 から )
        // to 、 from はそれぞれジャンプ先を表し、両方ともオブジェクトです // to.path (ジャンプ先のルートのアドレスを表します);
     }
}

上記は、同じページの動的読み込みを実現するための Vue ルーティング リスニングの例の詳細です。同じページの動的読み込みを実現するための Vue ルーティング リスニングの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。