So implementieren Sie eine Vorwärtsaktualisierung und eine Rückwärtsaktualisierung ohne Aktualisierung in Vue

Vor Kurzem versuche ich, 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).

In diesem Artikel wird hauptsächlich der Effekt der Vorwärtsaktualisierung und des Rückwärts-Nichtaktualisierungseffekts von Vue vorgestellt, d. betreten). Dieser Artikel wird Ihnen die Umsetzungsideen mitteilen. Freunde, die ihn benötigen, können darauf verweisen. Ich hoffe, er kann allen helfen.

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 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 Schnittstelle auf der obersten Ebene 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 toll, 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>

Verwandte Empfehlungen:

Das umfassendste js-Codebeispiel zum Aktualisieren der aktuellen Seite im Jahr 2018

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