Cache nur 1 Routenkomponente dynamisch mit Keep-Alive

Question

Ich versuche, bestimmte Routenkomponenten am Leben zu erhalten und in der Lage, die zwischengespeicherten Routen zu löschen und die neue zwischengespeicherte Route festzulegen. Mein Code unten funktioniert, aber ich kann die zwischengespeicherten Komponenten nicht löschen.

Ich habe Meta-prop auf den Strecken, die ich

 { 
      name: 'Route1', 
      path: '/route1', 
      component: lazyLoading('route1', true), 
      meta: { 
       auth: true, 
       cacheRoute: 'Route1', 
      }, 
     }, 
     { 
      name: 'Route2', 
      path: '/route2', 
      component: lazyLoading('route1', true), 
      meta: { 
       auth: true, 
       cacheRoute: 'Route2', 
      }, 
     }, 

gecached werden sollen und dann verwende ich before Methode auf meinem Router.

router.beforeEach((to, from, next) => { 
    if (to.meta.cacheRoute && store.getters.cachedRouteObject.cached !== 
    to.meta.cacheRoute) 
     store.dispatch('cacheRoute', { 
      cached: to.meta.cacheRoute, 
      uncached: from.meta.cacheRoute, 
     }).then(() => { 
      next(); 
     }); 
    next(); 
}); 

Und die vuex cachedRouteObject wie folgt verwenden:

<keep-alive :include="cachedRouteObject.cached" 
    :exclude="cachedRouteObject.uncached"> 
     <router-view></main-router-view> 
    </keep-alive> 

Der Punkt ist, dass im Laufe der Zeit, wenn ich von der Route wechseln alle Komponenten zu routen, die Aufenthalt im Cache gespeicherten zwischengespeichert werden müssen, so habe ich am Ende oben mit viele zwischengespeicherte Komponenten. anstelle von nur 1. es scheint, dass Attribut ausschließen nicht funktioniert, wie ich es erwartet habe. irgendwelche Ideen, wie man immer nur eine Wegkomponente zwischenspeichert.

Answer 1

Sie müssen keep-alive die Komponentennamen übergeben, nicht die Routennamen.

Das Spiel zunächst auf die Komponente des eigenen Namens Option, dann seinen lokalen Registrierungsnamen (der Schlüssel in der übergeordneten Komponenten Option), wenn der Name Option nicht verfügbar ist aktiviert ist. Anonyme Komponenten können nicht verglichen werden.

https://vuejs.org/v2/api/#keep-alive