[vue] beforeDestroy中dom為null？

場景：頁面支持播放語音 跳轉到其他頁面時 需要在 beforeDestroy中暫停播放 防止部分型號手機再下個頁面中繼續播放

先來看一下代碼：

beforeDestroy() {
      let _audio = document.getElementById('audioIntroduce');
      console.log(_audio);
      _audio.pause();
      this.isPlaying = false;
}

結果如下：

 

通過 document.getElementById('audioIntroduce') 拿到的dom竟然為null？這不科學

接着我在 beforeDestroy() 里打印 document 發現打印出來的document對象竟然是我跳轉之后的頁面對象QAQ

打斷點發現 一旦開始執行 beforeDestroy() 這個方法 頁面就跳轉到了下一個頁面 此時document對象當然就是下一個頁面

嘗試打印this對象 發現打印出來的this是當前頁面的vue對象，那么既然可以拿到當前頁面的this對象 同樣的 可以通過ref拿到我們想要的audio元素

修改后：

beforeDestroy() {
      let _audio = this.$refs.audioIntroduce;
      console.log(_audio);
      _audio.pause();
      this.isPlaying = false;
}

此時拿到的audio對象：

 

 yeah！done！！