Vue中使用aplay组件，进行路由跳转时如何保持aplay的播放状态？

Question

emmmmm，初入vue的组件坑
我想实现的功能是这样的：

在主页底部用了vue资源中的aplay插件，现在是点击跳转到其他路由的时候，这个音乐组件会重置，希望在路由跳转的时候保持播放状态
主页的html结构如下：

<template>
  <div id="app">
    <!--外部容器-->
    <el-container>
      <!--头部-->
      <el-header id="header">
        <topbar></topbar>
      </el-header>
      <router-view/>
      <!--尾部-->
      <el-footer>

      </el-footer>
      <!--播放器插件-->
      <keep-alive>
        <!-- 组件将被缓存吗？？？？？ -->
        <el-main id="mp-main">
          <aplayer :music="{
              title: 'secret base~君がくれたもの~',
              artist: 'Silent Siren',
              src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
              pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'}"
          />
        </el-main>
      </keep-alive>
    </el-container>
  </div>

</template>

<script>
  import Topbar from './components/Topbar.vue'
  import Aplayer from 'vue-aplayer'

  export default {
    name: 'App',
    components:{
      Aplayer,
      Topbar,
    }

  }
</script>

看了一下vue中的<keep-alive>挺懵的
希望大家能够给我一点思路~谢谢！

Answer 1

1. 使用 vuex；
2. 参考网易云音乐等音乐播放 app；使用的是 iframe.

Answer 2

播放器放在app.vue里 放在router-view外面，这样路由的跳转不会影响播放器

Answer 3

我使用的是 vuex 存储参数 aplayer写了个全局的 这样虽然切换路由不影响播放器 但是有个问题 我不知道是不是BUG。 你现在解决了么 怎么解决的

Answer 4

请问这个问题解决了么 播放器放在app.vue里 放在router-view外面 依然不好使啊 切换路由 歌曲就停了。。。

Answer 5

把它单独抽成一个组件，import引入下然后用keep-alive包裹起来