Vue3，vue-router，如何保持未使用的视图挂载，带有音频播放（超过保持活动状态）？

Question

我想使用 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-mounted 之类的东西替换 keep-alive（但已隐藏）。 我该怎么做？

备注：

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

Answer 1

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

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

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 视图从 DOM 和 keep-alive 中提升，但音频不受此影响。

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

这个效果很好。您可以在 https://github.com/suterma/replayer-pwa/blob/a5acd8dc3b5a277bca6d9baf9459fb70eea2e1a5/src/components/TrackAudioApiPlayer.vue

查看完整代码

Vue3，vue-router，如何保持未使用的视图挂载，带有音频播放（超过保持活动状态）？

Vue3, vue-router, how to keep unused view mounted, with audio playback (more than keep-alive)?

vue-router

vuejs3

keep-alive