音乐播放器项目-歌曲播放

我们单击的音乐列表所在的页面是MusicList.vue和SingerMusicList.vue，要想单击音乐跳转到播放页面就需要把li 替换成路由跳转标签router-link ，并且携带歌曲songid值到歌曲播放页面，代码如下：

这样我们在单击任意一首歌时都能跳转到歌曲播放页面，并能成功地接收歌曲id值。在MusicPlay.vue页面，根据得到的动态歌曲id值可访问百度音乐歌曲接口，从而获取歌曲进而播放，代码如下：

这样我们在单击任意一首歌时都能跳转到歌曲播放页面，并能成功地接收歌曲id值。在MusicPlay.vue页面，根据得到的动态歌曲id值可访问百度音乐歌曲接口，从而获取歌曲进而播放，代码如下：

注意：关于使用file_link不能播放的问题，是因为百度使用Http中的Referer头字段来防止盗链，在index.html文件中加上meta name=＂referrer＂content=＂never置，代码如下：

我们单击的音乐列表所在的页面是MusicList.vue和SingerMusicList.vue，要想单击音乐跳转到播放页面就需要把li 替换成路由跳转标签router-link ，并且携带歌曲songid值到歌曲播放页面，代码如下：

这样我们在单击任意一首歌时都能跳转到歌曲播放页面，并能成功地接收歌曲id值。在MusicPlay.vue页面，根据得到的动态歌曲id值可访问百度音乐歌曲接口，从而获取歌曲进而播放，代码如下：

注意：关于使用file_link不能播放的问题，是因为百度使用Http中的Referer头字段来防止盗链，在index.html文件中加上meta name=＂referrer＂content=＂never＂这一句让发送出去的Http包都不含Referer字段就可以了。

数据加载完毕后，渲染歌曲播放页面，并加入一些阿里巴巴矢量图标，代码如下：