페이지를 바꾸면서 일시정지 없이 음악을 듣는 방법

페이지를 바꾸면서 일시정지 없이 음악을 듣는 방법

Vue js를 사용하여 페이지를 바꾸면서 음악 재생을 계속할 수 있는 방법은 무엇입니까?

작동 원리:
1. 사용자가 페이지에서 음악을 듣기 시작합니다.example.com
2. 그는 로 갑니다.example.com/about그리고 듣기 시작한 음악이 멈추지 않아요.

부모 컴포넌트에 있는 음악은 독립된 컴포넌트이기 때문에 해야 한다고 생각합니다만, 잘 모르겠습니다.

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

main.discloss.main.discloss.

  import Vue from 'vue'
  import App from './App'
  import VueRouter from 'vue-router'
  import About from './components/About'
  import Main from './components/main'

  Vue.use(VueRouter);

  const routes = [
    { path: '/', component: Main },
    { path: '/about', component: About }
  ];

  const router = new VueRouter({
    routes,
    mode: 'history'
  });

  new Vue({
    el: '#app',
    template: '<App/>',
    components: { App },
    router
  }).$mount('#app');

정보.vue

<template>
  <div id="about">
    <h1>The about page</h1>
    <br>
    <router-link to="/">Back to main page</router-link>
    <br>
    <audio controls oncontextmenu="return false">
      <source src="../bruh.mp3">
    </audio>
  </div>
</template>

<script>
  export default {
    name: 'about'
  }
</script>

main.vue

<template>

  <div id="about">
    <h1>The main page</h1>
    <br>
    <router-link to="/about">Go to about page</router-link>
    <br>
    <audio controls oncontextmenu="return false">
      <source src="../bruh.mp3">
    </audio>
  </div>

</template>

<script>
  export default {
    name: 'about'
  }
</script>

오디오용 새 컴포넌트를 생성하여 App.vue로 Import하여 외부에 배치합니다.<router-view></router-view>예:

/components/Audio Component.vue(오디오를 사용할 수 없습니다).vue는 이미 존재하기 때문에audioHTML 요소)

<template>
    <audio controls oncontextmenu="return false">
      <source src="../bruh.mp3">
    </audio>
</template>

<script>
export default {
  // maybe take the src filename and controls on/off attribute as props?
  // maybe provide some methods for external control via an event bus or shared state
}
</script>

/App.vue

<template>
  <div id="app">
    <!--  put a shared header here, e.g. links to routes, top bar, sidebar menu, etc -->
    <router-view></router-view>
    <audio-component></audio-component>
    <!-- put a shared footer here -->
  </div>
</template>

<script>
  import AudioComponent from './components/AudioComponent.vue'

  export default {
    name: 'app',
    components: {
      AudioComponent,
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/59165560/how-to-listen-to-music-without-pausing-while-changing-the-page