Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

tgtPageParams: {}, // Zielseitendaten für den zugehörigen Sprung (es bleibt nur ein Element erhalten)
srcPageParams: [], // Quellseitendaten des zugehörigen Sprunges (Array-Typ, behält Daten mehrerer Seiten, kann in mehreren Ebenen zurückgegeben werden, bis zur Rückkehr zur Ausgangsseite)

// Sprung verknüpfen, zur Zielseite springen und die Daten der Quellseite und der Zielseite in Vuex speichern
goTargetPage(Status, Optionen) {
  // Fügen Sie der Abfrage der Quellseite den Bezeichner tgtPageName hinzu, um sich die Zielseite zu merken options.srcParams.query = Object.assign({}, options.srcParams.query, { tgtPageName: options.tgtParams.name });
  // Fügen Sie srcPageName zur Abfrage der Zielseite hinzu, um sich die Quellseite zu merken options.tgtParams.query = Object.assign({}, options.tgtParams.query, { srcPageName: options.srcParams.name });

  state.srcPageParams.push(options.srcParams); // Quellseitendaten speichern state.tgtPageParams = options.tgtParams; // Zielseitendaten speichern router.push({ name: options.tgtParams.name, query: options.tgtParams.query }); // Zur Zielseite springen },

// Sprung assoziieren, zurück zur Quellseite springen goSourcePage(state, vm) {
  let obj = state.srcPageParams.slice(-1)[0]; // Nimm das letzte Element des Arrays // Wenn Vuex Daten von der vorherigen Seite hat, kehre basierend auf den Daten von Vuex zur vorherigen Seite zurück if (obj && Object.keys(obj).length > 0) {
    router.push({ name: obj.name, query: obj.query }); // Umleitung }
  // Wenn in Vuex keine Daten von der vorherigen Seite vorhanden sind, aber auf der Route ein Flag für die vorherige Seite vorhanden ist, kehren Sie gemäß dem Routen-Flag zur vorherigen Seite zurück (um das Problem zu vermeiden, dass Vuex-Daten verloren gehen und beim Aktualisieren der Detailseite nicht zur vorherigen Seite zurückgekehrt werden kann).
  sonst wenn (vm && vm.$route.query.srcPageName) {
    router.push({ name: vm.$route.query.srcPageName });
  }
},

/**
 * Mit dieser Methode können sprungbezogene Seiten verknüpft werden. * 1. Quellseite: Die in Vuex gespeicherten Daten können in verwendungsfähige Daten wiederhergestellt werden. * 2. Zielseite: Die von der Quellseite an Vuex übergebenen Daten können in verwendungsfähige Daten umgewandelt werden. * 3. Nachdem die Quellseitendaten wiederhergestellt wurden, löschen Sie die entsprechenden Sicherungsdaten in Vuex und löschen Sie die auf der Route gespeicherte Zielseitenkennung. * @param vm {object} Erforderliche aktuelle Vue-Komponenteninstanz * /
$changeVueData: (vm) => {
  Lassen Sie tgtParams = store.state.tgtPageParams;
  let srcParams = vm.$store.state.srcPageParams.slice(-1)[0] || {}; // Den letzten Elementwert abrufen let name = vm.$route.name;
  let query = vm.$deepCopyJSON(vm.$route.query); // Die tiefe Kopie hier liegt daran, dass $route.query aktualisiert werden muss // Bestimmen Sie, ob die aktuelle Seite die Zielseite oder die Quellseite ist // Die Beurteilungsbedingung besteht darin, zuerst zu bestimmen, ob der Routenname konsistent ist, und dann zu bestimmen, ob der Attributwert der angegebenen Abfrage ebenfalls konsistent ist let isTgtPage = tgtParams.name === name &&
    (tgtParams.checkKeys ? tgtParams.checkKeys.every(Schlüssel => tgtParams.query[Schlüssel] === Abfrage[Schlüssel]) : true);
  let isSrcPage = srcParams.name === name &&
    (srcParams.checkKeys ? srcParams.checkKeys.every(Schlüssel => srcParams.query[Schlüssel] === Abfrage[Schlüssel]) : true);

  // Wenn die aktuelle Seite die Zielseite ist if (isTgtPage) {
    Object.assign(vm.$data, tgtParams.data || {}); // Aktualisieren Sie die von der Quellseite an die Daten() der aktuellen Seite übergebenen Daten, damit die Seite sie abfragen kann.}
  // Wenn die aktuelle Seite die Quellseite ist if (isSrcPage) {
    Object.assign(vm.$data, srcParams.data || {}); // Aktualisiere die vor dem Sprung zu data() der aktuellen Seite gespeicherten Daten, damit die Seite wiederhergestellt werden kann store.commit('popSourcePage'); // Lösche das letzte Datenelement von srcPageParams // Nachdem die mit der Quellseite verknüpfte Sprunglogik abgeschlossen ist, lösche die Zielseitenkennung auf der aktuellen Seitenroute, um Probleme beim Aktualisieren der Seite zu vermeiden delete query.tgtPageName;
    vm.$router.push({ Name, Abfrage });
  }
},

// Zurück-Schaltfläche.vue
<Vorlage>
  <button class="primary-btn return-btn" v-if="showBackBtn" @click="backFn">
    <i class="return-icon"></i>{{ backText }}
  </button>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Zurück-Schaltfläche',
  Requisiten: {
    // Zurück zum Text der vorherigen Seite backText: {
      Typ: Zeichenfolge,
      default: () => 'Vorheriger Schritt'
    },
    // Funktion zum Zurückkehren zur vorherigen Seite backFn: {
      Typ: Funktion,
      Standard: () => {}
    }
  },
  Daten() {
    zurückkehren {
      showBackBtn: falsch,
    };
  },
  montiert() {
    dies.setBackBtnShow();
  },
  aktiviert() {
    dies.setBackBtnShow();
  },
  Methoden: {
    // Aktualisiere den Status der Schaltfläche, um zur vorherigen Seite zurückzukehren setBackBtnShow() {
      dies.$nextTick(() => {
        Lassen Sie srcPage = this.$store.state.srcPageParams.slice(-1)[0];
        this.showBackBtn = Boolean(srcPage && Object.keys(srcPage).length > 0);
      });
    },
  },
};
</Skript>
<style scoped lang="scss">
</Stil>

// Stammkomponente App.vue
/*...Code ausgelassen...*/
betrachten:
  // Hören Sie zu, führen Sie es aus, wenn sich die Route ändert $route(to, from) {
    // Wenn es weder die Quellseite noch die Zielseite ist, lösche die in Vuex gespeicherten Daten // Verhindere, dass während des zugehörigen Sprungs Menüs gewechselt oder andere Vorgänge ausgeführt werden, da dies zu Restdaten vom letzten zugehörigen Sprung in Vuex führen würde, if (!to.query.srcPageName && !to.query.tgtPageName) {
      dies.$store.commit('clearTargetPage');
      dies.$store.commit('clearSourcePage');
    }
  },
},
/*...Code ausgelassen...*/

// Seite A.vue
/*...Code ausgelassen...*/
montiert() {
  vm = dies;
  vm.$changeVueData(vm); // Zu verwandten Seiten springen. Jedes Mal, wenn Sie eine Seite aufrufen, müssen Sie die Funktion $changeVueData ausführen. Informationen zur spezifischen Verwendung finden Sie im Kommentar der aufrufenden Methode. vm.ready();
},
/*...Code ausgelassen...*/
Schritt 2, Springen Sie von Seite A zu Seite B, der Code lautet wie folgt:

// Seite A.vue
/*...Code ausgelassen...*/
Methoden: {
  // Gehe zu Seite B goUserSituation: function (name) {
    lass srcParams = {
      Name: vm.$route.name,
      Abfrage: vm.$route.query
    };
    let tgtParams = {
      Name: 'Benutzersituation',
      Daten: {
        geprüftesSystem: Name
      }
    };
    vm.$goTargetPage(srcParams, tgtParams);
  },
},
/*...Code ausgelassen...*/

// Seite B.vue
/*...Code ausgelassen...*/
montiert() {
  vm = dies;
  vm.$changeVueData(vm); // Zu verwandten Seiten springen. Jedes Mal, wenn Sie eine Seite aufrufen, müssen Sie die Funktion $changeVueData ausführen. Informationen zur spezifischen Verwendung finden Sie im Kommentar der aufrufenden Methode. vm.ready();
},
/*...Code ausgelassen...*/
Schritt 4, zurück zu Seite A, der Code lautet wie folgt:

// Seite B.vue
/*...Code ausgelassen...*/
<Vorlage>
  <div>
    <ZurückButton :backFn="$goSourcePage"></ZurückButton>
    /*...Code ausgelassen...*/
  </div>
</Vorlage>
/*...Code ausgelassen...*/