es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Vue3, vue-router, cómo mantener las vistas no utilizadas montadas, con reproducción de audio (además de keep-alive)?

Vue3, vue-router, cómo mantener las vistas no utilizadas montadas, con reproducción de audio (además de keep-alive)?

29 May, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    <router-view v-slot="{ Component }">
  <component :is="Component" v-show="$route.meta.keepMounted"></component>
</router-view>

    En este ejemplo, estamos usando v-show para mostrar condicionalmente el componente solo cuando el campo meta de la ruta incluye la propiedad keepMounted. 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:

    {
  path: '/mi-ruta',
  component: MyComponent,
  meta: { keepMounted: true }
}

    Esto asegurará que MyComponent esté siempre montado y oculto cuando la ruta mi-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.

Comments are closed.