程式設計式路由

怎麼實現點選哪個跳轉到哪個頁面？

除了使用 <router-link> 來建立 a 標籤來定義導航連結，通過設定不同的id跳轉到指定頁面，我們還可以藉助 router 的例項方法，通過編寫程式碼來實現。

動態路由的傳參

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

<router-link :to="{path:'/listview',query:{id:item.id}}" class="swiper-slide" v-for="(item,i) in musics.musicList" :key="i">

在 listview 組建中接收

非同步函式

//ajax是非同步函式(網路請求花費時間，然而程式碼不等待直接往下執行 ) // async(宣告一個非同步函式) 與 await(等待結果) 是一組結構

1.用setup（）方法獲取當前位址列裡的id，

const route = useRoute(); //當前元件的路由資訊物件

 export default {
        name: "listView",
        setup() {
            const route = useRoute();
            //當前元件的路由資訊物件
            //ajax是非同步函式(網路請求花費時間，然而程式碼不等待直接往下執行 )
            // async(宣告一個非同步函式)    await(等待結果)  是一組結構
​
            onMounted(//view與model繫結
                async () =>{
                    let id = route.query.id;
                    console.log(id);
                    let res=await getPlaylistDetail(id);
                    console.log(res);
                })
        }
    }
 

2.引用

 import {useRoute} from 'vue-router'

怎麼實現點選哪個跳轉到到對應的歌單列表並獲取到指定頁面的內容？

思路：1.開啟網易雲 找到歌單列表的介面

2.src的api/index.js 封裝介面

//獲取歌單詳情的api  /playlist/detail?id=24381616  id:當前歌單的詳情
​
export function getPlaylistDetail(id) {
    return axios.get(`${baseUrl}/playlist/detail?id=${id}`)
}

3.在listView.vue中

 import {getPlaylistDetail} from '@/api/index.js'
 

4.渲染與丟擲

返回上一頁設定：@click="$router.go(-1)"