Welche Wiederverwendungsprobleme gibt es im Zusammenhang mit Vue-Router-Komponenten?

In diesem Artikel wird hauptsächlich das Problem der Wiederverwendung von Vue-Router-Komponenten ausführlich erläutert. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Das Komponentensystem ist ein wichtiger Teil von Vue. Es kann eine komplexe Seitenabstraktion in viele kleine, unabhängige, wiederverwendbare Komponenten zerlegen und durch die Kombination von Komponenten mit der Routing-Funktion eine Anwendung bilden Komponente zur entsprechenden Route, teilt Vue mit, wo sie durch Änderungen in der Route gerendert werden sollen, und realisiert die Sprungnavigation zwischen jeder Komponente und jeder Seite.

Problem

Wenn Sie Vue-Router zum Wechseln von Routen verwenden, wird die Aktualisierung des Komponentenbaums ausgelöst und ein neuer Komponentenbaum basierend auf der definierten Route gerendert Der ungefähre Umstellungsprozess sieht wie folgt aus:

1. Unnötige Komponenten deaktivieren und entfernen

2. Machbarkeit des Wechsels überprüfen

3. Komponenten wiederverwenden, die nicht aktualisiert wurden

4. Neue Komponenten aktivieren und aktivieren

Informationen zum spezifischen Routing-Switching-Steuerungsprozess finden Sie unter das offizielle Dokument: Switching Control Pipeline

Wie bestimmt Vue-Router, ob eine Komponente wiederverwendet werden kann? Schauen wir uns die folgende Routing-Konfiguration an:

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

Dies ist die Route, die die entsprechende Artikelseite über die Artikel-ID lädt. Beim ersten Zugriff wird die Post.vue-Komponente in die Komponente gerendert Wenn wir den Artikelinhalt über die Artikel-ID abrufen und auf der Seite anzeigen, ändert sich der Routing-Parameter: postId entsprechend unseren Erwartungen Artikel sollte angezeigt werden, aber es geht nach hinten los.

Was wir sehen, ist immer noch der vorherige Artikel. Obwohl sich die Routing-Parameter geändert haben, geht Vue-Router davon aus, dass Sie auf die Post.vue-Komponente zugreifen, da die Komponente bereits zuvor gerendert wurde . Verwenden Sie die vorherige Komponente und führen Sie keine Vorgänge in der Komponente aus, einschließlich Lebenszyklusfunktionen wie Mounten.

Am Ende sehen wir also den Inhalt der Originalkomponente.

Wie können wir also den gewünschten Effekt erzielen? Im Folgenden wird eine effektive Lösung vorgestellt

Lösung

Wir können den Watch-Listener verwenden, um Routing-Änderungen zu überwachen und entsprechend auf Änderungen in den Routing-Parametern zu reagieren Die Daten lauten wie folgt:

Definieren Sie die Datenerfassungsmethode

Definieren Sie zunächst eine Methode zum Abrufen des Artikels und rufen Sie die entsprechenden Artikelinformationen aus dem Hintergrund gemäß ab Artikel-ID .

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

Hören Sie sich die Route an

Dann besteht der nächste Schritt darin, festzustellen, ob die Zielkomponente eine Post.vue-Komponente ist, wenn die Route geändert wird. Dies kann implementiert werden Basierend auf dem definierten Routennamen können wir die Zielartikel-ID aus den Routing-Informationen abrufen, um den Komponenteninhalt zu aktualisieren.

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

Komponenteninitialisierung

Hier ist zu beachten, dass die Überwachung des Routings ungültig ist, wenn die Komponente zum ersten Mal im Komponentenbaum montiert wird. Zu diesem Zeitpunkt müssen wir die Komponente im Lebenszyklus-Hook initialisieren:

mounted() {
  this.getPost(this.$route.params.postId);
}

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So berechnen Sie den Polygonschwerpunkt in JavaScript

So verwenden Sie die Schalterauswahl im WeChat-Applet

Detaillierte Interpretation der Angular-Fehler 404-Probleme

So verwenden Sie die Slider-Komponente in WeChat-Miniprogrammen

So merken Sie sich Passwörter für Cookies in Vue

AngularJS wichtiges Versionsupdate

So verwenden Sie die Fortschrittskomponente im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonWelche Wiederverwendungsprobleme gibt es im Zusammenhang mit Vue-Router-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!