使用vue实现一个移动端页面录音业务，并实现每一个路由跳转也可以录取声音

实现移动端页面录音业务可以使用H5的Web Audio API来完成，而使用Vue来开发页面可以更加方便地管理组件和状态。下面是实现流程：

1. 首先需要安装Vue和vue-router，可以使用npm来进行安装。

2. 创建一个录音组件，并在其中添加录音、暂停、播放等功能。可以使用Web Audio API中的MediaRecorder来进行录音，使用AudioContext来播放录音。

3. 在路由跳转时，将录音数据存储到Vuex中，在新页面中读取Vuex中的录音数据，并进行播放。

4. 在录音结束后，将录音数据上传到服务器，可以使用axios或其他网络请求库来进行上传。

下面是一个简单的实现示例：

<template>
  <div>
    <button v-if="!recording" @click="startRecording">开始录音</button>
    <button v-if="recording" @click="stopRecording">停止录音</button>
    <<button v-if="!playing" @click="playRecording">播放录音</button>
    <button v-if="playing" @click="stopPlaying">停止播放</button>
    <router-link :to="{name: 'play'}">跳转到播放页面</router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      recording: false,
      playing: false,
      mediaRecorder: null,
      audioContext: new AudioContext(),
      audioBuffer: null,
      audioSource: null
    }
  },
  computed: {
    ...mapState(['recordingData'])
  },
  methods: {
    startRecording() {
      this.recording = true
      navigator.mediaDevices.getUserMedia({audio: true})
        .then(stream => {
          this.mediaRecorder = new MediaRecorder(stream)
          const chunks = []
          this.mediaRecorder.ondataavailable = e => chunks.push(e.data)
          this.mediaRecorder.onstop = () => {
            const blob = new Blob(chunks, {type: 'audio/ogg; codecs=opus'})
            const reader = new FileReader()
            reader.onload = () => {
              const arrayBuffer = reader.result
              this.audioContext.decodeAudioData(arrayBuffer, buffer => {
                this.audioBuffer = buffer
              })
            }
            reader.readAsArrayBuffer(blob)
          }
          this.mediaRecorder.start()
        })
    },
    stopRecording() {
      this.recording = false
      this.mediaRecorder.stop()
      this.$store.commit('setRecordingData', this.audioBuffer.getChannelData(0))
    },
    playRecording() {
      this.playing = true
      this.audioSource = this.audioContext.createBufferSource()
      this.audioSource.buffer = this.audioBuffer
      this.audioSource.connect(this.audioContext.destination)
      this.audioSource.start()
    },
    stopPlaying() {
      this.playing = false
      this.audioSource.stop()
    }
  }
}
</script>

在Vuex中存储录音数据：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    recordingData: null
  },
  mutations: {
    setRecordingData(state, data) {
      state.recordingData = data
    }
  }
})

在播放页面中读取录音数据并播放：

<template>
  <div>
    <button v-if="!playing" @click="playRecording">播放录音</button>
    <button v-if="playing" @click="stopPlaying">停止播放</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['recordingData'])
  },
  data() {
    return {
      playing: false,
      audioContext: new AudioContext(),
      audioSource: null
    }
  },
  methods: {
    playRecording() {
      this.playing = true
      const audioBuffer = this.audioContext.createBuffer(1, this.recordingData.length, this.audioContext.sampleRate)
      audioBuffer.getChannelData(0).set(this.recordingData)
      this.audioSource = this.audioContext.createBufferSource()
      this.audioSource.buffer = audioBuffer
      this.audioSource.connect(this.audioContext.destination)
      this.audioSource.start()
    },
    stopPlaying() {
      this.playing = false
      this.audioSource.stop()
    }
  }
}
</script>