Vue3配合vue-router如何让非活动视图保持挂载以维持音频播放？

核心逻辑是将需要保持挂载的路由组件全程保留在DOM树中，仅通过CSS控制显隐，完全避免组件卸载，可根据你的实际需求选择以下两种实现方式：

方式一：少量路由保活（推荐适配你的音频播放场景） #

如果仅需要给Play这类少数路由保持挂载，直接手动渲染组件配合v-show控制显隐即可，实现零成本：

<template>
  <!-- 音频播放组件永久挂载，仅匹配对应路由时显示 -->
  <Play v-show="$route.name === 'Play'" />
  <!-- 其他普通路由正常走默认路由渲染逻辑 -->
  <router-view v-slot="{ Component }" v-if="$route.name !== 'Play'">
    <component :is="Component" />
  </router-view>
</template>

<script setup>
import Play from './views/Play.vue'
</script>

该方案下Play组件永远不会被卸载，切换路由时只会触发显隐状态变更，音频播放不会中断。

方式二：多路由批量保活 #

如果有多个路由都需要保持挂载，可以统一配置保活路由列表，实现通用处理：

<template>
  <!-- 批量渲染所有需要保活的路由组件 -->
  <template v-for="route in keepMountedRouteList" :key="route.name">
    <component 
      :is="route.component" 
      v-show="$route.name === route.name" 
    />
  </template>
  <!-- 非保活路由走正常渲染逻辑 -->
  <router-view v-slot="{ Component }" v-if="!currentIsKeepMounted">
    <component :is="Component" />
  </router-view>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
// 引入所有需要保活的路由组件
import Play from './views/Play.vue'
import LiveRoom from './views/LiveRoom.vue'

// 配置保活路由列表
const keepMountedRouteList = [
  { name: 'Play', component: Play },
  { name: 'LiveRoom', component: LiveRoom }
]

const route = useRoute()
// 判断当前路由是否属于保活路由
const currentIsKeepMounted = computed(() => {
  return keepMountedRouteList.some(item => item.name === route.name)
})
</script>

注意事项 #

• 保活组件如果需要响应路由参数变化，可直接监听$route对象的变更更新内部状态，和普通路由组件的处理逻辑一致。
• 保活组件会持续占用内存，建议仅给确实需要避免卸载的场景开启，普通页面仍走默认的路由销毁逻辑即可。
• 如果需要在组件显隐时执行自定义逻辑，可以监听当前路由是否匹配组件路由来触发对应操作。

内容的提问来源于stack exchange，提问作者Marcel