vue gleiche Route springen erzwungene Aktualisierung

Vue ist ein sehr beliebtes JavaScript-Framework für die Entwicklung von Single-Page-Anwendungen (SPA). Vue Router ist bei der Entwicklung von Single-Page-Anwendungen unverzichtbar. Vue Router ist der offiziell von Vue.js bereitgestellte Routing-Manager, der es Entwicklern ermöglicht, Routen, Ansichten und Verhaltensweisen für die Bearbeitung von Navigationsanfragen einfach zu definieren.

Vue Router lädt den Seiteninhalt standardmäßig nicht neu, wenn zwischen denselben Routen gesprungen wird, sondern liest den zuvor geladenen Inhalt aus dem Cache. Obwohl diese Methode die Leistung verbessern kann, müssen Entwickler in einigen Fällen eine Seitenaktualisierung erzwingen, beispielsweise wenn die neuesten Daten unmittelbar nach der Aktualisierung des Seiteninhalts angezeigt werden müssen.

In diesem Artikel erfahren Sie, wie Sie die Aktualisierung derselben Route in Vue erzwingen.

Problembeschreibung

Wenn wir im Vue Router zwischen denselben Routen wechseln, rendert Vue die Komponente nicht erneut, was bedeutet, dass die Lebenszyklus-Hook-Funktion der Komponente nicht erneut ausgelöst wird. Das heißt, wenn wir möchten, dass die Daten in der Komponente mit dem Backend synchron bleiben, müssen wir die Aktualisierungslogik manuell hinzufügen.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

In diesem Beispiel rufen wir manuell die Funktion „updateData“ auf, um die Nachrichtendaten zu aktualisieren und sicherzustellen, dass sie mit dem Backend synchronisiert sind. Während dieser Ansatz das Problem lösen kann, kann der manuelle Aufruf der Aktualisierungsfunktion bei jedem Sprung umständlich werden, insbesondere wenn die Anwendung komplexer wird.

Lösung

Vue Router verfügt über eine integrierte globale Variable namens $route, die die aktuellen Routing-Informationen enthält. Wir können Routenänderungen erkennen, indem wir $route verfolgen und erzwingen, dass die Komponente aktualisiert wird, wenn sich die Route ändert.

Wir können den $route-Listener in der erstellten oder bereitgestellten Lebenszyklus-Hook-Funktion der Komponente registrieren und dann die Aktualisierung der Seite erzwingen, wenn sich $route ändert.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
    this.$router.afterEach((to, from) => {
      if (to.path === from.path) {
        this.$nextTick(() => {
          location.reload()
        })
      }
    })
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

In diesem Beispiel haben wir den $route-Listener im bereitgestellten Lebenszyklus-Hook registriert und eine Aktualisierung der Seite erzwungen, wenn eine Routenänderung erkannt wurde. Wir verwenden to.path und from.path, um zu vergleichen, ob die aktuelle Route mit der vorherigen Route übereinstimmt. Wenn sie identisch sind, kann festgestellt werden, dass der Benutzer die aktuelle Route aktualisiert. Zu diesem Zeitpunkt können wir die Aktualisierung der Seite über die Funktion location.reload() erzwingen.

Es ist zu beachten, dass wir die Funktion $nextTick() von Vue verwendet haben, bevor wir die Seite zwangsweise aktualisiert haben. Diese Funktion kann die Rückruffunktion aufschieben, bis das DOM aktualisiert wurde, um sicherzustellen, dass die Daten vollständig aktualisiert wurden. Wenn Sie die Funktion $nextTick() nicht verwenden, sondern die Aktualisierung der Seite direkt erzwingen, kann dies zu einer unvollständigen Seitenwiedergabe oder einer verzögerten Datenaktualisierung führen.

Zusammenfassung

Bei der Entwicklung von Vue-Single-Page-Anwendungen müssen wir oft zwischen den gleichen Routen wechseln. Standardmäßig rendert Vue Komponenten nicht neu, was zu Problemen führen kann, wenn der Seiteninhalt nicht mit den Back-End-Daten synchronisiert ist. Durch die Überwachung von $route-Änderungen im Vue Router können wir Sprünge zwischen denselben Routen erkennen und beim Springen eine Aktualisierung der Seite erzwingen, wodurch das Problem der nicht synchronisierten Daten gelöst wird.

Das obige ist der detaillierte Inhalt vonvue gleiche Route springen erzwungene Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!