Lösen Sie das Problem, dass mehrere Vue-Routen eine Seite gemeinsam nutzen

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem löst, dass mehrere Vue-Routen eine Seite teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Bei der täglichen Vue-Entwicklung kann es vorkommen, dass mehrere Routen eine Seite gemeinsam nutzen müssen, insbesondere wenn Routen dynamisch hinzugefügt werden. Verschiedene Routen zeigen nur unterschiedliche Daten an und sonst ändert sich nichts. Zum Beispiel:

let routes = [
  {path:"/zhanshan",
  components:Person,
  },
  {path:"/lisi",
  components:Person,
  },
  {path:"/wangwu",
  components:Person,
  }
]

In diesem Fall haben wir festgestellt, dass unsere Seite nach dem ersten erfolgreichen Laden nicht erneut geladen wird. Daher werden auf der Seite immer die zum ersten Mal geladenen Daten angezeigt, was den Eindruck erweckt, dass die Weiterleitung nicht wirksam geworden ist. Durch Beobachtung der Änderungen in der Adressleiste des Browsers können wir jedoch bestätigen, dass dies nichts mit der Weiterleitung zu tun hat Dies ist sehr nützlich für Schüler, die gerade erst mit der Verwendung von Vue begonnen haben. Dies hängt tatsächlich mit dem Deklarationszyklus der Seite zusammen. berechnet...) wird nach dem Laden der Seite nicht erneut gestartet, daher fühlt es sich auf der Seite so an, als gäbe es keinen Sprung.

Diese Art von Geschäftsanforderung ist tatsächlich einfacher zu handhaben. Wir müssen lediglich die Daten auf der Seite ändern Wenn sich die Seite ändert, laden wir die Daten neu.

watch:{
 "$route":function(to,from){
   //from 对象中包含当前地址
   //to 对象中包含目标地址
   //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
 }
}

Die obige Funktion wird immer dann ausgelöst, wenn sich die Route ändert. In dieser Funktion können wir die Seitendaten neu laden. Wenn sich die Seitenstruktur stark ändert, empfiehlt es sich, eine separate neue Seite zu erstellen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie EL-Ausdrücke, um Kontextparameterwerte in JS zu erhalten

JS verschiebt die linke Liste nach die richtige Listenfunktion

Verwendung des el-Ausdrucks in js und nicht-leerer Beurteilungsmethode

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass mehrere Vue-Routen eine Seite gemeinsam nutzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!