Vue3, vue-router, cómo mantener las vistas no utilizadas montadas, con reproducción de audio (además de keep-alive)?
Quiero usar vue-router, pero luego mantener una vista actualmente no utilizada montada en el DOM. Algo como el keep-alive
de Vue, pero solo ocultando la vista no utilizada en lugar de desmontarla.
La razón es que esta vista tiene un reproductor de audio y quiero mantenerlo reproduciéndose. Al desmontarlo se detiene. Así es como se ve actualmente:
<!-- Para mantener el audio dentro del componente del reproductor multimedia en ejecución, simplemente mantenga todos los componentes vivos durante los cambios de ruta -->
<router-view v-slot="{
Component
}">
<keep-alive include="Play">
<component :is="Component"></component>
</keep-alive>
</router-view>
Me gustaría reemplazar el keep-alive
por algo como keep-mounted
(pero oculto). ¿Cómo puedo hacer eso?
Notas:
Por supuesto, ya he intentado usar el keep-alive
de Vue, como se sugiere aquí: https://stackoverflow.com/a/66297873/79485, y funciona como se anuncia. Sin embargo, no es suficiente, necesito mantener el componente montado, no solo guardado en memoria.
He encontrado https://github.com/Akryum/vue-router-multi-view, pero esto es solo para vue2.
davy.ai
Para lograr el resultado deseado de mantener una vista actualmente no utilizada montada en el DOM pero oculta, puede utilizar la directiva
v-show
incorporada de Vue para mostrar u ocultar el componente condicionalmente. Aquí hay un ejemplo:En este ejemplo, estamos usando
v-show
para mostrar condicionalmente el componente solo cuando el campometa
de la ruta incluye la propiedadkeepMounted
. Esto le permite controlar qué componentes se mantienen montados y cuáles no.Para habilitar el comportamiento
keepMounted
para una ruta específica, puede agregar lo siguiente a la configuración de su ruta:Esto asegurará que
MyComponent
esté siempre montado y oculto cuando la rutami-ruta
esté activa, permitiendo que su reproductor de audio continúe reproduciéndose sin interrupciones.Tenga en cuenta que este enfoque todavía mantiene el componente en memoria, por lo que si el uso de memoria es una preocupación, es posible que necesite considerar otras estrategias como la carga perezosa o la carga dinámica del componente cuando sea necesario.