Lösen Sie das Problem, dass die Daten der Vue-Routing-Änderungsseite nicht aktualisiert werden

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem löst, dass die Daten der Vue-Routing-Änderungsseite nicht aktualisiert werden. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Nehmen Sie jeden Tag ein wenig auf und notieren Sie die Probleme, auf die ich gestoßen bin. Ich hoffe, dass es mehr Menschen helfen kann, die mit den gleichen Problemen konfrontiert sind wie ich.

Problembeschreibung: Durch Anpassen der Benutzeroberfläche wird die Fragenliste der Hilfeseite dynamisch angezeigt. Die Fragenliste hat mehrere Ebenen. Wenn die angeklickte Frage keine Fragen der nächsten Ebene enthält, wird zur Inhaltsseite gesprungen .

Das Problem ist, dass ich, als ich an der mobilen Seite auf meinem Computer arbeitete, nacheinander zur Detailseite gesprungen bin und auf die Schaltfläche

geklickt habe, um direkt zu springen Zum ersten Bild oben sieht es so aus, als ob das nicht das gewünschte Ergebnis wäre. In diesem Moment dachte ich darüber nach, die Hierarchie der Seite zu ändern, indem ich die URL ändere.

Das übergeordnete Element der ersten Ebene ist 0, was nicht angezeigt wird oder standardmäßig angezeigt wird.

Das übergeordnete Element der zweiten Ebene ist 1. Wenn Sie auf die Route der ersten Ebene klicken, ändert sich die folgende Abbildung:

Wenn Sie auf klicken, um die Seite der nächsten Ebene aufzurufen, werden die Daten aktualisiert, aber Wenn Sie auf den Computer klicken, um zurückzugehen, hat sich die letzte URL des übergeordneten Elements in 1 geändert und auf der Seite werden weiterhin die Daten von 2 angezeigt.

Die Lösung lautet wie folgt:

created () {
 console.log(this.getStatus(this.$route.path))
},
 watch: {
 '$route' (to, from) {
  console.log(this.getStatus(this.$route.path))
 }
 },
 methods: {
 getStatus (urlStr) {
  var urlStrArr = urlStr.split('/')
  return urlStrArr[urlStrArr.length - 1]
 }
},

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

Verwandte Artikel:

So führen Sie ein Symbolsymbol in ein Vue-Projekt ein

Überprüfung des E-Mail-Adressformats in JavaScript

Einführung in Time-Sharing-Funktionen zur Optimierung der Javascript-Leistung

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass die Daten der Vue-Routing-Änderungsseite nicht aktualisiert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!