So erzielen Sie in Vue einen Vorwärtsaktualisierungs- und einen Rückwärts-Nichtaktualisierungseffekt

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()
})

Umschließen Sie die letzte Schnittstelle, die zwischengespeichert werden muss, mit keep-alive , und Sie können den Effekt einer Aktualisierung beim Vorwärtsgehen und einer Nichtaktualisierung beim Zurückgehen erzielen.

<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件 -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
     <!-- 这里是不被缓存的视图组件 -->
    </router-view>

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

Verwandte Artikel:

Erklären Sie ausführlich das Problem der Implementierung des React-Server-Renderings

So schreiben Sie ein PC-seitiges Karusselldiagramm mit jquery (detailliertes Tutorial)

So entwickeln Sie über die Header-Komponente in Vue (detailliertes Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie in Vue einen Vorwärtsaktualisierungs- und einen Rückwärts-Nichtaktualisierungseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!