音乐播放器项目-轮播图

npm install vue-awesome-swiper --save

在main.js中引入swiper及其样式，代码如下：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

接着创建公共轮播图SwiperSilder.vue组建页面，代码如下：

接着将SwiperSilder.vue导入首页，使其在该页面展示，代码如下：

页面显示效果如图

轮播图效果完成后，在热门榜单下方添加一个查看更多榜单的功能，供大家查看更多的歌单。首先在MusicList.vue页面添加查看更多榜单功能，并携带musictype参数给榜单详情Recommend路由，使其跳转到相对应的榜单详情页面，代码如下：

页面显示效果如

创建榜单详情页面，在接收到路由传来的音乐类型参数后，调用歌曲列表接口查询更多歌单，并且为歌单设置路由跳转到播放页面，代码如下：