首先是，访问酷狗排行榜以及排行榜里歌曲的 API

import axios from 'axios';

let commonParams = {
  inCharset: 'utf-8',
  outCharset: 'utf-8'
}

export function getKugouRank() {//排行榜单
  const url = 'KugouMusicAPI/rank/list&json=true'
  const data = Object.assign({}, commonParams, {

  })
  return axios.get(url, {
    params: data
  }).then((res) => { //成功的回调
    return Promise.resolve(res.data.rank.list)
  })
}

export function getKugouRankDetailList(rankid) {//排行榜详细歌曲信息
  const url = `KugouMusicAPI/rank/info/?rankid=${rankid}&page=1&json=true`
  const data = Object.assign({}, commonParams, {

  })
  return axios.get(url, {
    params: data
  }).then((res) => { //成功的回调
    return Promise.resolve(res.data.songs)
  })
}

在rank.vue文件中，引入top-list路由组件作为排行榜歌曲的容器

top-list.vue （参照 歌单组件）

在top-list组件中复用kugouMusic组件（其中再复用kugouSongList组件）

由于此功能与歌单列表实现类似，所以很多代码可以仿照、复用，具体功能实现不再赘述

效果图：