点击后进入歌单对应的详情页:

代码步骤:

1.轮播歌单

1.新建components /musicList.vue

2.联系musicList.vue 与 HomeView.vue

在HomeView.vue 中引入配置musicList.vue

3.配置轮播图和接口

引入轮播图

在查找接口为 /personalized?limit=10

index.js中接口封装

2.歌单详情页面

建立listView.vue与App.vue间的联系

在router/index .js 下

分块歌单详情制作页面

介绍栏

1.新建components / listViewTop.vue

2.联系listViewTop.vue 与 listView.vue

在listView.vue 中引入配置listViewTop.vue

3.index.js引入歌单详情接口

4.在listView.vue总页面

引入

 接口

5.设计listViewTop.vue页面

其中左上角图标返回上一页设置：

3.列表

1.新建components / playList.vue

2.联系playList.vue 与 listView.vue

在listView.vue 中引入配置playList.vue

实现点击那个歌单就进入哪个歌单详情

除了使用 来创建 a 标签来定义导航链接，通过设置不同的id跳转到指定页面，我们还可以借助 router 的实例方法，通过编写代码来实现。

动态路由的传参

轮播图 musicList.vue中

:to="{path:'/listview',query:{id:item.id}}"

 router将在 listview 组建中接收

异步函数

ajax是异步函数(网络请求花费时间，然而代码不等待直接往下执行 ) async(声明一个异步函数) 与 await(等待结果) 是一组结构

1.用setup（）方法获取当前地址栏里的 id

在store / index.js 中:

定义一个函数,修改state中的playlist音乐播放列表数据