Lösung für das Problem, dass das Vue-Menü nicht aktualisiert wird: 1. Schreiben Sie „
“ 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).
Offizielle Website-Erklärung
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
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!