Dieses Mal zeige ich Ihnen, wie Sie die Keep-Alive-Caching-Funktion verwenden und welche Vorsichtsmaßnahmen für die Verwendung der Keep-Alive-Cache-Funktion gelten. Das Folgende ist ein praktischer Fall . Werfen wir einen Blick darauf.
Vue implementiert das Caching von Komponenteninformationen
Wenn wir ein Vue-Projekt entwickeln, können wir nicht umhin, zu anderen Komponenten im Routing der Komponente zu wechseln Die Daten werden nach der Rückkehr neu geladen. Um mit dieser Situation umzugehen, müssen wir Keep-Alive verwenden, um die Vue-Komponenteninformationen 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 die Gruppierung-Teile 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 . Auf der index.js-Seite der Route
{
path: '',
name: '',
component: '',
meta: {keepAlive: true} // 这个是需要keepalive的
}，
{
path: '',
name: '',
component: ,
meta: {keepAlive: false} // 这是不会被keepalive的
}Dies implementiert die Caching-Funktion einiger Komponenten
Wenn die zwischengespeicherte Komponente die Daten löschen oder die Initialisierung ausführen möchte Rufen Sie beim Laden der Komponente die aktivierte Hook-Funktion wie folgt auf:
activated: function () {
this.data = ‘'
}Die Verwendung und der Unterschied zwischen berechneten und Methoden in Vue.js
Detaillierte Erklärung der Schritte um js-cookie zu verwenden
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Keep-Alive-Cache-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
