Vue3+node.js网易云音乐实战项目 歌单页面详细代码

整体效果

1、首先是路由跳转的主页面 ListView.vue

<template>
    <div class="listView">
        <!-- 传递参数给子组件 -->
        <listviewtop :playlist = "state.playlist"></listviewtop>
        <listviewIcon :playlist = "state.playlist"></listviewIcon>
        <playlistView :playlist = "state.playlist"></playlistView>
    </div>
</template>

<script>
import listviewtop from @/components/listView/listviewTop.vue
import listviewIcon from @/components/listView/listviewIcon.vue
import playlistView from @/components/listView/palylistView.vue

import {postPlaylistDetail} from @/api/index;
import { onMounted ,reactive} from vue;
import {useRoute} from vue-router
export default {
    components:{
        listviewtop,
        listviewIcon,
        playlistView
    },
    setup(){
     const route = useRoute()
     let state = reactive ({
         list:[],
         playlist:{
             creator:{},
             tracks:{}  
         },
         })
         
     onMounted(async()=>{
        //  获取传入的id
         let id = route.query.id
         let result = await postPlaylistDetail(id)
         state.playlist = result.data.playlist
     })
     return{
       state
     }
 }
}
</script>

<style lang="less" scoped>
.listView{
    width: 7.5rem;
}


</style>

2、listviewTop.vue顶部

然后是三个子组件，listviewTop.vue顶部

3、listviewIcon.vue

然后就是导航栏的子组件部分 listviewIcon.vue

4、playlistView.vue

然后就是播放列表的子组件，playlistView.vue

整体效果