Verwenden Sie Routing in Vue, um die Seitenaktualisierung zu implementieren

In diesem Artikel wird hauptsächlich vorgestellt, wie Vue die Seitenaktualisierung durch Routing implementiert. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

vue entwickelt ein WeChat-Mall-Projekt

Die Anforderungen sind wie folgt:

Die Warenkorbseite enthält mehrere Komponenten Zur Kasse springen Auf der Bestellseite wird die Warenkorbseite bei der Rückkehr von der Bestellung nicht aktualisiert. Da Ereignisse zwischen Warenkorbkomponenten über den Bus übertragen werden, können Seitensprünge (nicht physische Rücksendungen) die beforeDestroy-Methode nicht auslösen Die Bus-Methode kann in dieser Methode nicht zerstört werden

 beforeDestroy() {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')
 },

Er hat keine andere Wahl, als sie durch beforeRouteLeave zu zerstören

 beforeRouteLeave(to, from, next) {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')

  next()
 },

Ebenso kann die Erstellungsmethode des Warenkorbs nicht ausgelöst werden, wenn die physische Rückgabe erfolgt gemacht, und die $on-Methode des Busses kann nicht ausgelöst werden

In der letzten Analyse ist die physische Rückkehr Dieses Problem kann gelöst werden, indem die Seite von Zeit zu Zeit aktualisiert wird

Idee 1

  beforeRouteEnter(to, from, next) {
   next(()=>{
     window.location.reload()
   })
  },

Diese Methode scheint theoretisch machbar, aber die Seite wird endlos aktualisiert,

Schließlich habe ich die zweite Idee übernommen , die zu sein scheint Eine sehr einfache Methode, aber sie löst das eigentliche Problem.

 this.$router.replace({ name: 'cart' })// 处理返回刷新问题
   this.$router.push({
    path: '/order/order_sure',
    query: {
     sku: sku_str,
     cart: 'cart'
    }
   })

Ersetzen Sie die Seite durch Routing auf die aktuelle Seite, springen Sie dann zur Bestellseite und kehren Sie zurück. Diese Methode kann automatisch aktualisiert werden nicht ideal. Wenn Sie eine bessere Methode haben, teilen Sie sie bitte mit.

Es gibt eine spezielle Methode, um dieses Problem zu lösen. Fügen Sie auf der Warenkorbseite den folgenden Code hinzu.

 // 销毁组件，返回刷新
 deactivated() {
  this.$destroy()
 },

Der oben genannte Was ich für Sie zusammengestellt habe, wird Ihnen hoffentlich in Zukunft weiterhelfen.

Verwandte Artikel:

PHP-Verschlüsse und anonyme Funktionen (ausführliches Tutorial)

Über benutzerdefinierte Ereignisse in Vue-Komponenten (ausführliches Tutorial)

So verwenden Sie die dreistufige Verknüpfungsauswahl im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonVerwenden Sie Routing in Vue, um die Seitenaktualisierung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!