說明：一個全局播放的背景音樂，首頁無音樂無音樂圖標，在首頁互動跳轉頁面并開始播放音樂，切換頁面不需暫停音樂也不會重置音樂，可以通過音樂圖標控制暫停或播放。

MusicPlay.vue（音樂組件）

<template>
<div :class="[{musicPlay:isPlaying},'music']" v-show="isMusic" @click="musicPlay">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z"></path></svg>
<audio ref="audioPlayer" id="audioPlayer" :src="musicUrl" controls="controls" autoplay loop="true" hidden="true" @play="handlePlay" @pause="handlePause"></audio>
</div>
</template>
<script setup>
import {defineComponent,getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive,watch} from 'vue';defineProps({})//使用vue的getCurrentInstance 方法獲取當前組件實例
const { proxy } = getCurrentInstance()let musicUrl = require('@/assets/images/music.mp3') //音樂地址
let audioPlayer = ref(null) //音樂
let isPlaying = ref(false) //是否播放動畫效果//播放按鈕
const musicPlay = ()=>{if(isPlaying.value) {audioPlayer.value.pause()isPlaying.value = false} else {audioPlayer.value.play()isPlaying.value = true}
}//播放監聽
const handlePlay = () => {isPlaying.value = true
}//暫停監聽
const handlePause = () => {isPlaying.value = false
}//音樂圖標是否顯示(首頁隱藏圖標)
let isMusic = ref(false) //音樂圖標是否顯示
watch(()=>proxy.$router.currentRoute.value.path,(newV,oldV)=>{if(newV != '/'){isMusic.value = true}
})</script>
<style>
.music{width:4rem;height:4rem;border-radius:4rem;position:fixed;left:1rem;top:1rem;z-index:999;display:flex;align-items:center;background:#419035;justify-content:center;}
.musicPlay{animation:rotate 5s linear infinite;}
.music .icon{width:2rem;height:2rem;fill:#c3db60;}
.music audio{display:none;}
@keyframes rotate{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
</style>

App.vue(使用音樂組件)

<template><!--app.vue其他代碼--><!--組件使用-->
<music-play></music-play><!--app.vue其他代碼--></template>
<script setup>//引入組件
import MusicPlay from '@/components/MusicPlay.vue'</script>

index.vue(頁面起始頁首頁)

<template>
<div><!--其他html-->
<!--注: 除app.vue引入音樂組件 其他頁面均不需再引用--><div @click="goPass">點擊開始</div></div>
</template>
<script setup>
import {defineComponent,getCurrentInstance,ref,reactive,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,onServerPrefetch,toRaw,watch} from 'vue';//使用vue的getCurrentInstance 方法獲取當前組件實例
const { proxy } = getCurrentInstance()//去開啟音樂并跳轉其他頁
const goPass = () => {//捕獲頁面中的id為audioPlayer的音樂標簽(MusicPlay.vue)let audioPlayer = document.getElementById('audioPlayer')//設置音樂開始播放audioPlayer.play()//跳轉其他頁面proxy.$router.push("/xxxxxx")
}
</script>