Vue3，vue-router，如何保持未使用的视图挂载，音频播放（不仅仅是保持活动）？

Posted 2023-03-10

【中文标题】Vue3，vue-router，如何保持未使用的视图挂载，音频播放（不仅仅是保持活动）？

【英文标题】：Vue3, vue-router, how to keep unused view mounted, with audio playback (more than keep-alive)?

【发布时间】：2021-12-31 22:38:08

【问题描述】：

我想使用 vue-router，然后将当前未使用的视图挂载在 DOM 中。 类似于 Vue 的 keep-alive，但只是隐藏未使用的视图，而不是卸载它。

原因是，这个视图中有一个音频播放器，我想继续播放。卸载时，它正在停止。以下是它目前的样子：

<!-- To keep the audio within the media player component running, 
simply keep all components alive over route changes -->
<router-view v-slot=" Component ">
    <keep-alive include="Play">
        <component :is="Component" />
    </keep-alive>
</router-view>

我想将 keep-alive 替换为 keep-mounted（但已隐藏）。我该怎么做？

注意事项：

当然，我已经尝试过使用 Vue 的 keep-alive，正如这里所建议的：https://***.com/a/66297873/79485，它的工作原理与宣传的一样。然而，这还不够，我需要保持组件挂载，而不仅仅是保存在内存中。 我找到了https://github.com/Akryum/vue-router-multi-view，但这只是vue2。

【问题讨论】：

你能把组件放在router-view之外吗？

@Thomas 我可以，至少是音频元素，它本身没有视觉表示。但是我有一些镀铬，我怀疑，在回来后，组件可以再次获取播放元素的数据。而且，我实际上有多个音频元素，具体取决于视图的某些状态。

【参考方案1】：

我找到了针对当前特定问题的解决方案，即音频播放中断。正如@Thomas 所建议的，我已使用Web Audio API 将音频元素完全放在DOM 之外.

这是我在创建组件时使用元素创建音频上下文的方法：

data: () => (
    //...
    /** The audio context to use
    audioContext: new AudioContext(
        latencyHint: 'interactive',
    ),
    audioElement: document.createElement('audio'),
),

我从不将音频元素添加到 DOM，而是像往常一样将它与接收到的元素句柄一起使用：

/** Handles the setup of the audio graph outside the mounted lifespan.
 * @devdoc The audio element is intentionally not added to the DOM, to keep it unaffected of unmounts during vue-router route changes.
 */
created() 
    this.audioElement.src = this.src;
    //.....
,

有了这个，虽然 VueJs3 视图使用keep-alive 从 DOM 中提升，但音频不受此影响。

我随后在 unmounted() 生命周期事件中销毁音频上下文和音频元素。

这很好用。您可以在https://github.com/suterma/replayer-pwa/blob/a5acd8dc3b5a277bca6d9baf9459fb70eea2e1a5/src/components/TrackAudioApiPlayer.vue查看完整代码