实现效果：
实现思路：
- 异步获取后台api中的歌单信息
- 使用轮播图组件，实现歌单轮播
- 将播放量转换为万、亿单位
- 点击歌单画面，进入单独的歌单详情页
具体实现过程：
1. 异步获取后台api中的歌单信息
在api/index.js中定义获取歌单方法
// 获取推荐歌单,可选参数 : limit: 取出数量 , 默认为 10
export function getMusicList(limit=10){return axios.get(`${baseUrl}/personalized?limit=${limit}`)
}
在musicList.vue中调用，将异步获取到的结果存在响应式对象state.musicList中
let state = reactive({musicList:[]})onMounted(async()=>{let result = await getMusicList()state.musicList = result.data.result;})
2. 使用轮播图组件，实现歌单轮播
onUpdated(()=>{var swiper = new Swiper('#musicSwiper', {slidesPerView: 3,spaceBetween: 10,});})
3. 将播放量转换为万、亿单位
由于从后台获取到的是完整数字，展示出来太长了，所以转换成万、亿单位会有更好的视觉效果
在setup同步方法中，定义一个changeValue函数，使用整除的思想转换单位
function changeValue(num){let res = 0if(num>=100000000){res = num/100000000res = res.toFixed(2) + '亿'}else if(num>10000){res = num/10000res = res.toFixed(2) + '万'}return res}
在template中调用该方法
<span>{{changeValue(item.playCount)}}</span>
4. 点击歌单画面，进入单独的歌单详情页
点击歌单跳转到单独的详情页涉及到了路由跳转，因此使用router-link
<router-link :to="{path:'/listview',query:{id:item.id}}" class="swiper-slide" v-for="(item,i) in state.musicList" :key="i"><img :src="item.picUrl" :alt="item.name"><div class="name">{{item.name}}</div><div class="count"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-24gl-play"></use></svg><span>{{changeValue(item.playCount)}}</span></div></router-link>
往to中传入baseurl和特定的id信息
