Wie vue+keep-alive den Website-Cache betreibt

Dieses Mal zeige ich Ihnen, wie Sie den Website-Cache mit Vue+Keep-Alive betreiben und welche Vorsichtsmaßnahmen für den Betrieb des Website-Cache mit Vue+Keep-Alive gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

Vue implementiert das Caching von Komponenteninformationen

Wenn wir ein Vue-Projekt entwickeln, ist es unvermeidlich, dass die Komponentendaten verloren gehen, nachdem die Route auf andere Komponenten umgestellt wurde und dann zurückgeladen. Um mit dieser Situation umzugehen, müssen wir Keep-Alive verwenden, um die Komponenteninformationen von vue zwischenzuspeichern, damit sie nicht neu geladen werden.

1. In app.vue

<keep-alive>
  <router-view></router-view>
</keep-alive>

Aber in diesem Fall werden alle Komponenten zwischengespeichert und das Zwischenspeichern einzelner Komponenten kann nicht erreicht werden .

Dann fügen wir einige Komponenten hinzu. Die Implementierungsmethode ist wie folgt:

in app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>
<!-- 这里不会被keepAlive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

2. Im Routing index.js Seite ri

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

Dies realisiert die Caching-Funktion einiger Komponenten

Wenn die zwischengespeicherte Komponente die Daten löschen oder die Initialisierungsmethode ausführen möchte, rufen Sie beim Laden den aktivierten Hook auf Die Komponentenfunktion lautet wie folgt:

activated: function () {
  this.data = ‘'
}

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue-route+beforeEach verwenden, um Navigationswächter zu erstellen

Wie Webpack Caching betreibt

Das obige ist der detaillierte Inhalt vonWie vue+keep-alive den Website-Cache betreibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!