keep-alive condicional

Podría provide métodos para que las rutas secundarias se agreguen o eliminen a sí mismas a la propiedad de exclude de keep-alive a través de un conjunto reactivo keepAliveExcludes . Exponga la referencia a la plantilla como una matriz calculada (la propiedad de exclude requiere Array , no Set ):

 // App.vue import { provide, reactive, computed } from 'vue' export default { setup() { const keepAliveExcludes = reactive(new Set()) provide('keepAliveExcludes', { add: name => keepAliveExcludes.add(name), remove: name => keepAliveExcludes.delete(name), }) return { keepAliveExcludes: computed(() => Array.from(keepAliveExcludes)) } } }

En la plantilla de la aplicación, vincule keepAliveExcludes a <keep-alive>.exclude :

 <template> <router-view> <keep-alive :exclude="keepAliveExcludes"> ... </keep-alive> </router-view> </template>

En la ruta secundaria, inject el keepAliveExcludes y llame a su add / remove con el nombre del componente cuando sea necesario (por ejemplo, a través de la casilla de verificación):

 <template> <h1>About</h1> <div> <label>Keep Alive <input type="checkbox" v-model="keepAlive"> </label> </div> </template> <script> import { ref, inject, watchEffect } from 'vue' export default { name: 'About', setup() { const { add: addKeepAliveExclude, remove: removeKeepAliveExclude } = inject('keepAliveExcludes', {}) const keepAlive = ref(true) watchEffect(() => { if (keepAlive.value) { removeKeepAliveExclude?.('About') } else { addKeepAliveExclude?.('About') } }) return { keepAlive } }, } </script>

demostración 1

Excluir siempre de keep-alive

Si necesita excluir siempre el componente de la caché de keep-alive , simplemente puede configurar el nombre del componente de forma estática sin la complejidad de provide / inject arriba.

En la plantilla de la aplicación, especifique el nombre del componente (debe coincidir con el name prop en la declaración del componente) en <keep-alive>.exclude :

 <template> <router-view> <keep-alive exclude="About"> ... </keep-alive> </router-view> </template>

demostración 2

@ tony19 publicó una respuesta increíble, pero debido a un posible error de VUE (actualmente uso 3.2.6), tiene algunos problemas.

Cuando se inicia un componente excluido del mantenimiento de actividad y luego se alcanza el máximo de componentes de mantenimiento de actividad, VUE intenta eliminar el componente excluido inexistente.

Esto conduce a un error y detiene la aplicación. Consulte a continuación para obtener más información sobre el error.

Mi solución se basa en la solución alucinante de tony19.

En lugar de excluir el componente después de cargarlo, agregué reglas al enrutador justo antes de cargar el componente.

 const routes = [ /* ... */ { path: "/about", name: "AboutPage", meta: { excludeKeepAlive: true }, component: () => import('./../components/AboutPage.vue'), } /* ... */ ];

y luego en la APP principal;

 /* This is the main app */ export default { setup() { /* ... */ const keepAliveExcludes = reactive(new Set()); cont keepAliveExcluder= { add: name => keepAliveExcludes.add(name), remove: name => keepAliveExcludes.delete(name), } router.beforeEach((to, from, next) => { if(to.meta?.excludeKeepAlive===true){ keepAliveExcluder.add(to.name); } next(); }); /* ... */ return { keepAliveExcludes: computed(() => Array.from(keepAliveExcludes)) } } }

Más sobre el error (posiblemente un error)

Se produce un error en runtime-core.esm-bundler.js:2057

Uncaught (in promise) TypeError: Cannot read property 'type' of undefined

VUE no puede encontrar el componente excluido dinámicamente.