點選後進入歌單對應的詳情頁:

程式碼步驟:

1.輪播歌單

1.新建components /musicList.vue

2.聯絡musicList.vue 與 HomeView.vue

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

3.配置輪播圖和介面

引入輪播圖

<template>
    <div class="musicList">
        <div class="musicList-top">
            <div class="title">發現好歌單</div>
            <a class="more">檢視更多</a>
        </div>

        <div class="mlist">
            <div class="swiper-container" id="musicSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for
 
="(item,i) in musics.musicList" :key="i">
                        <img :src="item.picUrl" alt="">
                        <div class="name">{{item.name}}</div>
                        <div class="count">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zanting2-copy"></use>
                            </svg>
                            <span>{{item.playCount}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getMusic} from 
 
'@/api/index'
    import {reactive, onMounted, onUpdated} from 'vue'
    import 'swiper/css/swiper.css'
    import Swiper from 'swiper'
    export default {
        name: "musicList",
        setup() {//vue3組合api
            let musics = reactive({
                musicList: []//儲存獲取的歌單列表
            })
            onMounted(async () => {//view與model繫結成功之後生命週期函式
                let res = await getMusic(10)
                console.log(res.data.result)
                musics.musicList = res.data.result.slice(4, 14)
            })
            onUpdated(() => {
                var swiper = new Swiper('#musicSwiper', {
                    slidesPerView: 3,//每一屏顯示幾塊內容
                    spaceBetween: 10//每個內容間的間距
                })
            })
            return {musics}
        }}
</script>

在查詢介面為 /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

實現點選那個歌單就進入哪個歌單詳情

除了使用 <router-link> 來建立 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音樂播放列表資料