Vue implementiert den Forward-Refresh-Effekt

Dieses Mal werde ich Ihnen den Vorwärtsaktualisierungseffekt vorstellen. Was sind die Vorsichtsmaßnahmen für Vue, um den Vorwärtsaktualisierungseffekt zu realisieren?

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).

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 dem mobilen Android-Gerät 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 führt. In diesem Fall kann ich das KeepAlive der From-Route auf false und das KeepAlive der To-Route setzen Route auf „true“ setzen, wenn Sie rückwärts gehen. Sie können die Route, deren keepAlive auf „false“ gesetzt wurde, neu laden, bevor Sie wieder vorwärts gehen.

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.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Eine Zusammenfassung der jQuery-Code-Optimierungsmethoden

Wie man mit unvollständiger Seitenanzeige im 360-Browser umgeht Kompatibilitätsmodus

box-reflect, um einen Reflexionseffekt zu erzielen

Das obige ist der detaillierte Inhalt vonVue implementiert den Forward-Refresh-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!