Lösen Sie das Problem einer einzelnen Vue-Seite mithilfe der Keep-Alive-Seitenrückgabe ohne Aktualisierung

Im Folgenden werde ich einen Artikel mit Ihnen teilen, um das Problem der Verwendung der Keep-Alive-Seitenrückgabe ohne Aktualisierung einer einzelnen Seite in Vue zu lösen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Ich bin auf ein sehr ekelhaftes Problem gestoßen, als ich Vue zum Entwickeln eines einseitigen Projekts verwendet habe: Klicken Sie auf ein Datenelement auf der Listenseite, um die Detailseite aufzurufen, und wenn ich die Eingabetaste drücke, kehre ich zur Seite zurück Listenseite, die Seite wird aktualisiert. Die Benutzererfahrung ist sehr schlecht! ! ! Ich habe verwandte Probleme überprüft und 7c9485ff8c3cba5ae9343ed63c2dc3f7 verwendet, um dieses Problem zu lösen.

7c9485ff8c3cba5ae9343ed63c2dc3f7 ist eine integrierte Komponente von Vue, die den Zustand während des Komponentenwechsels im Speicher behalten kann, um ein wiederholtes Rendern des DOM zu verhindern.

Zuallererst gibt es den folgenden Code auf der App.vue-Seite. Wir alle wissen, dass die Seite hier gerendert wird.

<router-view></router-view>

Ändern Sie diesen Code zu Folgendem:

<keep-alive> 
<router-view v-if="$route.meta.keepAlive"></router-view> 
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view>

Wir können die logische Beurteilung dieses Codes sehen. Wenn der KeepAlive-Attributwert des Metaattributs der Route wahr ist, wird der Status der Seite gespeichert . In anderen Fällen wird der Status nicht gespeichert.

Dann setzen wir den keepAlive-Attributwert für unsere Route. Ich setze zum Beispiel das keepAlive-Attribut für die Route auf der Homepage (Listenseite).

{ 
name: 'index', 
path: '/index', 
title: '主页', 
component(resolve) { 
require(['views/index.vue'], resolve) 
}, 
meta: { 
pageTitle: '主页', 
keepAlive: true 
} 
}

Nachdem dies festgelegt wurde, wird der Status der Homepage gespeichert und die Seite aktualisiert die Anforderungsdaten nicht, wenn die Eingabetaste zur Homepage zurückkehrt.

Aber es gibt ein Problem! ! ! Wenn Sie von der Startseite zu einer beliebigen Seite springen und dann zur Startseite zurückkehren, wird die Seite nicht aktualisiert! Das ist nicht das, was ich möchte. Ich muss die Seite nur nicht aktualisieren, wenn ich von der Detailseite zur Listenseite zurückkehre. In anderen Fällen muss sie aktualisiert werden, also muss ich sie anpassen. Die allgemeine Idee besteht darin, den KeepAlive-Wert der Homepage auf false zu setzen, wenn von der Homepage zu anderen Seiten gesprungen wird, und den KeepAlive-Wert der Homepage auf true zu setzen, wenn von der Detailseite zur Homepage zurückgekehrt wird. Der Code lautet wie folgt:

Homepage Jump Wenn Sie zu anderen Seiten wechseln, setzen Sie den KeepAlive-Wert der Homepage auf „false“

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表页的meta值，false时再次进入页面会重新请求数据。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

Wenn Sie von der Detailseite zur Homepage zurückkehren, setzen Sie den KeepAlive-Wert der Homepage auf „true“ (Sie Ich muss ein Urteil fällen, um festzustellen, ob Sie zur Homepage zurückkehren.)

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 if (to.path == "/index") {
 to.meta.keepAlive = true;
 } else {
 to.meta.keepAlive = false;
 }
 next();
 }
};

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So verwenden Sie EL-Ausdrücke, um Kontextparameterwerte in JS zu erhalten

JS verschiebt die linke Liste nach die richtige Listenfunktion

Verwendung des el-Ausdrucks in js und nicht-leerer Beurteilungsmethode

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem einer einzelnen Vue-Seite mithilfe der Keep-Alive-Seitenrückgabe ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!