So lösen Sie das Problem, dass Vue Router die Originalseite nicht beibehält

Vue Router ist eine offiziell von Vue.js bereitgestellte Routing-Management-Lösung, die Seitensprünge und dynamisches Laden von Komponenten in Single-Page-Anwendungen (SPA) realisieren kann. Die Bedeutung des Vue Routers liegt auf der Hand, er kann für eine bessere Benutzererfahrung und Effizienz bei Projekten sorgen.

Aber bei der Verwendung von Vue Router kann es zu einem Problem kommen: Beim Seitensprung wird die Originalseite zerstört und der Originalzustand und die Originaldaten können nicht beibehalten werden. Diese Situation tritt normalerweise auf, wenn vue-router verwendet wird, um domänenübergreifende Seitensprünge durchzuführen, z. B. das Springen von einem Domänennamen oder Subdomänennamen zu einer Seite in einem anderen Domänennamen oder Subdomänennamen. Zu diesem Zeitpunkt reicht die Route von einer Webseite zur anderen, die gesamte Seite muss neu geladen werden und der vorherige Status und die Daten gehen verloren.

Wie kann man also das Problem lösen, dass Vue Router die Originalseite nicht beibehält? Hier sind einige Lösungen:

1. Verwenden Sie Keep-Alive-Komponenten

Vue.js bietet Keep-Alive-Komponenten, die bereits geladene Komponenteninstanzen zwischenspeichern können, ohne sie erneut zu rendern und zu zerstören. Verwenden Sie die Keep-Alive-Komponente, um den Status und die Daten der Originalseite beizubehalten, wenn die Seite springt.

Fügen Sie die Keep-Alive-Komponente zu der Komponente hinzu, die Status und Daten beibehalten muss, wie unten gezeigt:

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

Auf diese Weise können der Komponentenstatus und die Daten beibehalten und gleichzeitig der Seitensprungeffekt erzielt werden.

2. Speicher verwenden

Wenn Sie die Keep-Alive-Komponente nicht verwenden möchten, können Sie Speicher auch zum Speichern von Seitenstatus und Daten verwenden. Hören Sie sich die Routensprung-Lebenszyklusfunktion beforeRouteLeave in der Komponente an und speichern Sie den Status und die Daten, die nach dem Routensprung in der erstellten Lebenszyklusfunktion gespeichert werden müssen, lesen Sie den Status und die Daten aus dem Speicher und stellen Sie sie in der Komponente wieder her .

Die spezifische Code-Implementierung lautet wie folgt:

// 路由跳转前保存组件状态和数据到Storage
beforeRouteLeave(to, from, next) {
  localStorage.setItem('data', JSON.stringify(this.data));
  next();
}
// 路由跳转后从Storage中读取组件状态和数据并赋值给组件
created() {
  let data = JSON.parse(localStorage.getItem('data'));
  if (data) {
    this.data = data;
  }
}

Auf diese Weise können der Status und die Daten der Originalseite beibehalten werden, wenn die Seite springt.

3. Vuex verwenden

Vuex ist ein Statusverwaltungsframework für Vue.js zum Teilen des Status über mehrere Komponenten hinweg. Wenn Sie den Seitenstatus und die Daten beibehalten müssen, können Sie Vuex verwenden, um den Seitenstatus und die Daten im globalen Status zu speichern und sie dann aus dem globalen Status zu lesen und nach dem Seitensprung der Komponente zuzuweisen.

Der spezifische Code wird wie folgt implementiert:

// 在Vuex Store中定义状态和数据
const state = {
  data: {}
}
const mutations = {
  setData(state, data) {
    state.data = data;
  }
}
// 在组件中引入Vuex和Store，并将数据存储在全局状态中
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['setData']),
    beforeRouteLeave(to, from, next) {
      this.setData(this.data);
      next();
    }
  },
  created() {
    this.data = this.$store.state.data;
  }
}

Auf diese Weise können der Status und die Daten der Originalseite beim Seitensprung über Vuex beibehalten werden.

Zusammenfassung:

Die oben genannten sind mehrere gängige Lösungen, um das Problem zu lösen, dass Vue Router den Status und die Daten der Originalseite nicht beibehält. Sie haben jeweils ihre eigenen Vor- und Nachteile. Sie können je nach Unternehmen die geeignete Lösung auswählen Bedürfnisse. Ganz gleich, ob es sich um Keep-Alive-Komponenten, Speicher oder Vuex handelt, sie können uns dabei helfen, den ursprünglichen Zustand und die Daten bei Seitensprüngen beizubehalten und so die Benutzererfahrung und Effizienz zu verbessern.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass Vue Router die Originalseite nicht beibehält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!