So erzielen Sie den Effekt einer Vorwärtsaktualisierung und einer Rückwärtsaktualisierung ohne Aktualisierung in Vue

In diesem Artikel wird hauptsächlich der Effekt der Vorwärtsaktualisierung und des Rückwärts-Nichtaktualisierungseffekts von Vue vorgestellt, dh die geladene Schnittstelle kann zwischengespeichert werden (Rückkehr ohne Neuladen) und die geschlossene Schnittstelle kann zerstört werden (bei erneuter Eingabe neu geladen werden). In diesem Artikel erfahren Sie, welche Implementierungsideen Sie benötigen.

Ich habe kürzlich versucht, mobile Projekte mit Vue durchzuführen. Ich hoffe, den Effekt einer Vorwärtsaktualisierung und einer Rückwärtsaktualisierung zu erzielen. Das heißt, die geladene Schnittstelle kann zwischengespeichert werden (bei der Rückkehr ist kein Neuladen erforderlich) und die geschlossene Schnittstelle kann zerstört werden (bei der erneuten Eingabe neu geladen werden). Beispielsweise bewegt sich a->b->c vorwärts (b, c) und wird aktualisiert, und c->b->a bewegt sich ohne Aktualisierung rückwärts (b, a).

Da keep-alive alle geladenen Schnittstellen zwischenspeichert, ist es unmöglich, die Schnittstelle bei der Rückkehr zu zerstören, was dazu führt, dass die Schnittstelle beim erneuten Aufrufen nicht neu geladen wird. Die erste Lösung, die mir in den Sinn kommt, besteht also darin, this.$destroy(true) aufzurufen, um die Schnittstelle zu zerstören, wenn Sie auf der Schnittstelle auf die Schaltfläche „Zurück“ klicken. Auf mobilen Android-Geräten gibt es jedoch eine physische Rückgabetaste. Wenn Sie über die physische Rückgabetaste zurückkehren, gibt es keine Möglichkeit, damit umzugehen. Obwohl das Rückgabeereignis von Android umgeschrieben werden kann, um die js-Methode aufzurufen, wird die globale Methode von js aufgerufen und die oberste Schnittstelle kann nicht gezielt zerstört werden.

Also müssen wir einen anderen Weg finden. Glücklicherweise hat mich dieser Artikel dazu inspiriert, Vue-Router am Leben zu erhalten. Vielen Dank an den Autor für das Teilen.

Es wäre schön, wenn ich wissen könnte, ob die Route vorwärts oder rückwärts ist. Auf diese Weise kann ich das KeepAlive der Route „von“ auf „false“ und das KeepAlive der Route „to“ auf „true“ setzen, wenn ich rückwärts gehe. Damit ich beim Weitergehen das KeepAlive der Route auf „true“ setzen kann, lade ich die Route neu, deren KeepAlive zuvor auf „false“ gesetzt war.

Kein Unsinn mehr, hier werden drei Schnittstellen simuliert: Anmeldung beim Server und Hauptschnittstelle.

Zuerst habe ich eine strikte hierarchische Beziehung für die Pfade dieser drei Schnittstellenrouten festgelegt und keepAlive auf true gesetzt, was standardmäßig eine Zwischenspeicherung erfordert.

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/login'
  },
  {
   path: '/login',
   component: Login,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server',
   component: ServerList,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server/main',
   component: Main,
   meta: {
    keepAlive: true
   }
  }
 ]
})

Da sich die Pfade dieser drei Schnittstellen auf unterschiedlichen Ebenen befinden, kann ich den beforeEach-Hook verwenden, um zu bestimmen, wann ich zurückgehen muss. Wenn Sie zurückgehen, setzen Sie das KeepAlive der From-Route auf false und das KeepAlive der To-Route auf True.

router.beforeEach((to, from, next) => {
 const toDepth = to.path.split('/').length
 const fromDepth = from.path.split('/').length
 if (toDepth < fromDepth) {
  console.log(&#39;后退。。。&#39;)
  from.meta.keepAlive = false
  to.meta.keepAlive = true
 }
 next()
})

Die letzte Schnittstelle, die zwischengespeichert werden muss, wird mit keep-alive umschlossen, sodass der Effekt einer Aktualisierung beim Vorwärtsgehen und einer Nichtaktualisierung beim Zurückgehen erzielt werden kann erreicht werden.

rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Bitte achten Sie auf PHP Chinesische Website!

Verwandte Empfehlungen:

Vue.js 2.0 Implementierung der komprimierten Bild-Upload-Vorschaufunktion zum Aufnehmen von Fotos auf dem mobilen Endgerät

vue2.0 Weitere Beispiele für die Implementierung von Pull-Down-Refresh und Pull-Up-Laden auf Mobilgeräten

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt einer Vorwärtsaktualisierung und einer Rückwärtsaktualisierung ohne Aktualisierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!