Was soll ich tun, wenn das Vue-Menü nicht aktualisiert wird?

Lösung für das Problem, dass das Vue-Menü nicht aktualisiert wird: 1. Schreiben Sie „99df3d3b411e1be071f4ada3d31f1e18dd6e4ababe59793a4ac75fb9e5c5550e“ auf die Indexseite Name für „test-keep-alive“; 3. Konfigurieren Sie „{path: '/Material',name: 'Material'...}“ in der Router-Datei.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.

Was soll ich tun, wenn das Vue-Menü nicht aktualisiert wird?

vue realisiert die Komponentenwechsel-Registerkartenseite (Menü), ohne die Seite zu aktualisieren.

vue realisiert die Komponentenwechsel-Registerkartenseite (Menü), ohne die Seite zu aktualisieren (Keep Alive).

0a8c88b74c0d4e7d53c6011e2896741d Komponente von Vue, die den Status während des Komponentenwechsels im Speicher behalten kann, um ein wiederholtes Rendern des DOM zu verhindern.

Offizielle Website-Erklärung

7c9485ff8c3cba5ae9343ed63c2dc3f7Beim Umschließen dynamischer Komponenten werden inaktive Komponenteninstanzen zwischengespeichert, anstatt sie zu zerstören. Ähnlich wie , handelt es sich um eine abstrakte Komponente: Sie rendert kein DOM-Element selbst und erscheint auch nicht in der übergeordneten Komponentenkette. Wenn eine Komponente innerhalb gewechselt wird, werden ihre beiden Lebenszyklus-Hook-Funktionen, aktiviert und deaktiviert, entsprechend ausgeführt. In 2.2.0 und höher werden aktiviert und deaktiviert auf alle verschachtelten Komponenten innerhalb des Baums ausgelöst. Wird hauptsächlich verwendet, um den Komponentenstatus beizubehalten oder ein erneutes Rendern zu vermeiden.

Anwendungsszenarien

Beim Aufbau eines Systems mit der Funktion zum Schalten von Komponenten werden normalerweise Beschriftungen auf der Indexseite platziert und mit der in der Routerdatei konfigurierten Beziehung zwischen übergeordneten und untergeordneten Komponenten und Routing-Sprüngen gekoppelt, um dies zu erreichen Komponenten-Rendering der Seite. Dies hat jedoch zur Folge, dass die Seite jedes Mal, wenn auf die Komponente geklickt wird, neu gerendert wird und die Daten auf der Seite nicht erhalten bleiben. Daher kann die Verwendung des 7c9485ff8c3cba5ae9343ed63c2dc3f7-Tags, das mit dem 62fd61a4bda39e5f3eeccf86eb0f077c-Tag umschlossen ist, inaktive Komponenten zwischenspeichern und nach der Rückgabe weiterhin über die ursprünglichen Informationen verfügen.

Spezifischer Code

Schreiben Sie den folgenden Code auf die Indexseite

// 需要缓存的组件
<keep-alive v-if="showView">
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
// 不需要缓存的组件
<router-view v-if="!$route.meta.keepAlive"></router-view>

Der Name der Cache-Komponente ist Test-Keep-Alive. Das Einschließen hier ist Cache und das Ausschließen ist kein Cache

// 将缓存name为test-keep-alive的组件
<keep-alive include="test-keep-alive">
  <component></component>
</keep-alive>
// 将缓存name为teat,teat2的组件
<keep-alive include="teat,teat2">
  <component></component>
</keep-alive>

Konfigurieren Sie den folgenden Code im Router Datei

// 需要缓存的组件
{
    path: '/Material',
    name: 'Material',
    aliasName: '物料信息',
    meta:{keepAlive: true}, // 是否缓存组件
    component: () => import('../components/Material/index.vue'),
},
{
    path: '/Unit',
    name: 'Unit',
    aliasName: '单位信息',
    component: () => import('../components/Unit/index.vue'),
}

Empfohlenes Lernen: „vue.js Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Vue-Menü nicht aktualisiert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!