Vue の関連ページへのマルチレベルジャンプ (ページドリルダウン) 機能の完全な例

tgtPageParams: {}, // 関連ジャンプのターゲット ページ データ (1 つの項目のみが保持されます)
srcPageParams: [], // 関連ジャンプのソースページデータ（配列型、複数ページのデータを保持、初期ページに戻るまで複数階層で返すことができる）

// ジャンプを関連付け、対象ページにジャンプし、ソースページと対象ページのデータをVuexに保存します
goTargetPage(状態、オプション) {
  // ターゲット ページを記憶するために、ソース ページのクエリに tgtPageName 識別子を追加します。options.srcParams.query = Object.assign({}, options.srcParams.query, { tgtPageName: options.tgtParams.name });
  // ソース ページを記憶するために、ターゲット ページのクエリに srcPageName を追加します。options.tgtParams.query = Object.assign({}, options.tgtParams.query, { srcPageName: options.srcParams.name });

  state.srcPageParams.push(options.srcParams); // ソースページデータを保存します state.tgtPageParams = options.tgtParams; // ターゲットページデータを保存します router.push({ name: options.tgtParams.name, query: options.tgtParams.query }); // ターゲットページにジャンプします },

// ジャンプを関連付け、ソースページに戻る goSourcePage(state, vm) {
  let obj = state.srcPageParams.slice(-1)[0]; // 配列の最後の項目を取得します // Vuex に前のページのデータがある場合は、Vuex のデータに基づいて前のページに戻ります if (obj && Object.keys(obj).length > 0) {
    router.push({ name: obj.name, query: obj.query }); // リダイレクト }
  // Vuex に前のページのデータがないが、ルートに前のページのフラグがある場合は、ルートフラグに従って前のページに戻ります (詳細ページを更新したときに Vuex データが失われ、前のページに戻れなくなる問題を防ぐためです)
  そうでない場合 (vm && vm.$route.query.srcPageName) {
    router.push({ name: vm.$route.query.srcPageName });
  }
},

/**
 * このメソッドは、ジャンプ関連ページを関連付けるために使用できます* 1. ソースページ: Vuex に保存されたデータをデータに復元して使用できます* 2. ターゲットページ: ソースページから Vuex に渡されたデータをデータに入れて使用できます* 3. ソースページのデータが復元された後、Vuex 内の対応するバックアップデータを削除し、ルートに保存されたターゲットページ識別子を削除します* @param vm {object} 必要な現在の Vue コンポーネントインスタンス*/
$changeVueData: (vm) => {
  tgtParams = store.state.tgtPageParams とします。
  let srcParams = vm.$store.state.srcPageParams.slice(-1)[0] || {}; // 最後の要素の値を取得します。let name = vm.$route.name;
  let query = vm.$deepCopyJSON(vm.$route.query); // ここでディープコピーを行うのは、$route.query を更新する必要があるためです // 現在のページがターゲットページかソースページかを判定します // 判定条件は、まずルート名が一貫しているかどうか、次に指定されたクエリの属性値も一貫しているかどうかです let isTgtPage = tgtParams.name === name &&
    (tgtParams.checkKeys ? tgtParams.checkKeys.every(key => tgtParams.query[key] === query[key]) : true);
  isSrcPage = srcParams.name === name && とします。
    (srcParams.checkKeys ? srcParams.checkKeys.every(key => srcParams.query[key] === query[key]) : true);

  // 現在のページがターゲットページの場合 if (isTgtPage) {
    Object.assign(vm.$data, tgtParams.data || {}); // ソース ページから現在のページの data() に渡されたデータを更新して、ページがデータを照会できるようにします。}
  // 現在のページがソースページの場合 if (isSrcPage) {
    Object.assign(vm.$data, srcParams.data || {}); // 現在のページの data() にジャンプする前に保存されたデータを更新して、ページを復元できるようにします。 store.commit('popSourcePage'); // srcPageParams の最後のデータ項目を削除します。 // ソース ページに関連付けられたジャンプ ロジックが完了したら、ページの更新に関する問題を防ぐため、現在のページ ルートのターゲット ページ識別子をクリアします。 delete query.tgtPageName;
    vm.$router.push({名前、クエリ});
  }
},

// 戻るボタン.vue
<テンプレート>
  <button class="primary-btn return-btn" v-if="showBackBtn" @click="backFn">
    <i class="return-icon"></i>{{ backText }}
  </ボタン>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: '戻るボタン',
  小道具: {
    // 前のページのテキストに戻る backText: {
      タイプ: 文字列、
      デフォルト: () => '前のステップ'
    },
    // 前のページに戻る関数 backFn: {
      タイプ: 関数、
      デフォルト: () => {}
    }
  },
  データ（） {
    戻る {
      表示バックボタン: false、
    };
  },
  マウント() {
    this.setBackBtnShow();
  },
  アクティブ化() {
    this.setBackBtnShow();
  },
  メソッド: {
    // 前のページに戻るためのボタンのステータスを更新する setBackBtnShow() {
      this.$nextTick(() => {
        srcPage = this.$store.state.srcPageParams.slice(-1)[0] とします。
        this.showBackBtn = Boolean(srcPage && Object.keys(srcPage).length > 0);
      });
    },
  },
};
</スクリプト>
<スタイル スコープ lang="scss">
</スタイル>

// ルートコンポーネント App.vue
/*...コードは省略...*/
時計：
  // listen、ルートが変更されたときに実行 $route(to, from) {
    // ソースページでもターゲットページでもない場合は、Vuex に保存されているデータをクリアします // 関連するジャンプ中にメニューを切り替えたり、他の操作を実行したりしないようにします。その結果、Vuex 内の最後の関連するジャンプからのデータが残ります if (!to.query.srcPageName && !to.query.tgtPageName) {
      this.$store.commit('clearTargetPage');
      this.$store.commit('clearSourcePage');
    }
  },
},
/*...コードは省略...*/

// ページ A.vue
/*...コードは省略...*/
マウント() {
  vm = これ;
  vm.$changeVueData(vm); // 関連ページへジャンプします。ページに入るたびに、$changeVueData 関数を実行する必要があります。具体的な使用方法については、呼び出しメソッドのコメントを参照してください。 vm.ready();
},
/*...コードは省略...*/
ステップ 2、ページ A からページ B にジャンプします。コードは次のとおりです。

// ページ A.vue
/*...コードは省略...*/
メソッド: {
  // ページBにジャンプ goUserSituation: function (name) {
    srcParams = {とする
      名前: vm.$route.name、
      クエリ: vm.$route.query
    };
    tgtParams = {とする
      名前: 'ユーザー状況'、
      データ： {
        チェックされたシステム: 名前
      }
    };
    vm.$goTargetPage(srcParams、tgtParams);
  },
},
/*...コードは省略...*/

// ページ B.vue
/*...コードは省略...*/
マウント() {
  vm = これ;
  vm.$changeVueData(vm); // 関連ページへジャンプします。ページに入るたびに、$changeVueData 関数を実行する必要があります。具体的な使用方法については、呼び出しメソッドのコメントを参照してください。 vm.ready();
},
/*...コードは省略...*/
ステップ 4、ページ A に戻ります。コードは次のようになります。

// ページ B.vue
/*...コードは省略...*/
<テンプレート>
  <div>
    <backButton :backFn="$goSourcePage"></backButton>
    /*...コードは省略...*/
  </div>
</テンプレート>
/*...コードは省略...*/