Vue 2 <keep-alive> funktioniert nicht mit <router-view> und Schlüssel

Question

Ich benutze Vue-Router mit einer Reihe von Komponenten wie Tabs. Jede <router-link> ist eine Registerkarte und der Raum darunter ist die <router-view>. Zwei der Registerkarten sind die gleiche Komponente mit verschiedenen Filtern, sagen wir, sie sind products und der Router fügt einen Parameter zum Filtern hinzu: /products/new & /products/sale.

Innerhalb von products sind einzelne product Komponenten, die montiert werden, wenn die Route geöffnet wird. Mein Problem ist, dass die product Komponenten jedes Mal neu montiert werden, wenn ich zwischen den Routen wechsle und der Filterparameter geändert wird. Ich möchte sie zwischenspeichern, also ist das Wechseln einfacher und einfacher. Um dies zu tun, habe ich <keep-alive> eingerichtet und :key='$route.fullPath' zu meinem <router-view> hinzugefügt, aber sie scheinen nicht zwischengespeichert zu werden. Jedes product feuert noch ein mounted() Ereignis, wenn ich zwischen products umschalte.

<keep-alive> 
    <router-view :key='$route.fullPath'></router-view> 
</keep-alive> 

Sollte ich jeden products Blick in eine separate Komponente?

Answer 1

Ich glaube nicht, dass Sie router-view mit keep-alive im Cache speichern können. Von dem documentation von keep-alive:

Keepalive nicht mit funktionalen Komponenten funktioniert, weil sie im Cache nicht Instanzen werden muß.

Und router-view ist eine Funktionskomponente, aus der documentation:

die Komponente eine Funktionskomponente ist, die die angepassten Komponenten für den gegebenen Pfad macht.

Um diese Arbeit zu machen, müssen Sie innerhalb keep-alive dynamische Komponente haben, wie folgt:

<keep-alive> 
    <products ></products> 
</keep-alive>