效果

實現

實現導航組件

首先在pages目錄下新建musiclist目錄，然后在其下新建導航組件music_listnav.vue

<template lang="html"><div class="music-nav"><div class="log url hd"><h2>音樂榜單</h2><div>更多</div></div><ul><li><router-link to="/home/hot">熱歌榜</router-link><span class="gap-line"> </span></li><li><router-link to="/home/news">新歌榜</router-link><span class="gap-line"> </span></li><li><router-link to="/home/king">King榜</router-link><span class="gap-line"> </span></li></ul></div> </template><script> export default { } </script><style scoped>.music-nav{background-color: #fff;margin-top: 10px;padding: 10px 17px; }.hd {margin: 14px 0 18px 0;display: -webkit-box;display: -webkit-flex;display: flex; }.hd h2 {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin: 0;padding: 0;font-size: 20px; }.hd {margin-bottom: 0; }ul{display: flex; }ul li{padding: 18px 0 12px 0;font-size: 16px;flex: 1;text-align: center;color: #999;position: relative;z-index: 2; }ul li a{display: block; }ul li a.active{color: #299DE7 !important; } .gap-line {position: absolute;right: 0;top: 20px;height: 18px;width: 1px;border-left: 1px solid #eee; }</style>

在home.vue中引入導航組件

<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/><MusicListNav /><router-view />???</div> </template><script> import TodayRecommend from "../components/Today_Recommend" import NewsMusic from "../components/News_Music" import SwiperBanner from "../components/Swiper_Banner" import MusicListNav from "./musiclist/music_listnav" export default {name:"home",components:{TodayRecommend,NewsMusic,SwiperBanner,MusicListNav} } </script><style lang="css"> </style>

導航組件中實現三個組件的導航

音樂榜單下有個導航頁面組件music_list.vue,它能導航到hot_list.vue熱歌榜頁面組件，king_list.vue King榜頁面組件，news_list.vue新歌榜頁面組件，這三個頁面組件布局一致，但是請求的數據不同，所以這三個頁面都引入了公共組件music_List.vue，并且各自將請求的url作為參數傳遞給公共組件。

music_listnav.vue

<template lang="html"><div class="music-nav"><div class="log url hd"><h2>音樂榜單</h2><div>更多</div></div><ul><li><router-link to="/home/hot">熱歌榜</router-link><span class="gap-line"> </span></li><li><router-link to="/home/news">新歌榜</router-link><span class="gap-line"> </span></li><li><router-link to="/home/king">King榜</router-link><span class="gap-line"> </span></li></ul></div> </template><script> export default { } </script><style scoped>.music-nav{background-color: #fff;margin-top: 10px;padding: 10px 17px; }.hd {margin: 14px 0 18px 0;display: -webkit-box;display: -webkit-flex;display: flex; }.hd h2 {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin: 0;padding: 0;font-size: 20px; }.hd {margin-bottom: 0; }ul{display: flex; }ul li{padding: 18px 0 12px 0;font-size: 16px;flex: 1;text-align: center;color: #999;position: relative;z-index: 2; }ul li a{display: block; }ul li a.active{color: #299DE7 !important; } .gap-line {position: absolute;right: 0;top:20px;height:18px;<BR>??? width: 1px;border-left: 1px solid #eee; }</style>

hot_list.vue 、king_list.vue、news_list.vue

這三個組件頁面代碼一致，不同的是傳遞給公共組件music_List.vue的url參數不同，進而請求的數據不同。

<template lang="html"><div class= ""><MusicList :url="url" /></div> </template>< /P><script>< /P>import MusicList from "../../components/Music_List"export default {data(){<BR>??? return{url:"要請求的url"}},components:{MusicList} } </script><style lang="css"> </style>

公共組件music_List.vue

<template lang= "html"><div class="board panels"><div class="panel hotsongs on"><ul class= "list"><li class="song url" v-for="(item,index) in currentData" :key= "index"><div class= "poster"><img :src="item.pic_big" :alt= "item.title"></div><div class="info"><div class= "name">{{ item.title }}</div><div class="author">{{ item.artist_name }}</div></div></li></ul><div class="more-songs url">查看該榜單&gt;</div></div></div> </template><script> export default {data(){return{currentData:[]}},props:{url:{type:String,default:""}},mounted(){const httpUrl = this.HOST+this.url;this.$axios.get(httpUrl).then(res = > {this.currentData = res.data.song_list}).catch(error = > {console.log(error);})} } </script><style scoped><P>.board{margin-bottom:10px; }.panel {border-top: 1px solid #eee;position: relative;top: -1px;display: block;background: #fff; }.list{padding: 20px;padding-top: 0; }.panel .list li {height: 60px;border-bottom: 1px solid #eee;padding-left: 0;display: flex;padding-top: 10px; }.panel .list li .poster {position: relative;width: 45px;margin-right:8px; }.panel .list li .poster img {border: 1px solid #eee; } .info{flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; } .info .name {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;color: #333; }.info .author {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;color: #999;margin-top: 2px; }.more-songs {color: #999;margin-top: 9px;font-size: 12px;text-align: center;height: 32px;line-height: 32px; }</style>

?

配置路由?

打開router下的index.js

? {path: '/',name: 'Index',redirect:"/home",component: Index,children:[{path: 'home',component: Home,redirect:"/home/hot",children:[{path:"hot",component:HotList},{path:"king",component:KingList},{path:"news",component:NewsList}]},

home頁面本身就是index的子路由，而熱歌榜、新歌榜、KIng榜都是home的子路由。

最終index.js代碼：

import Vue from 'vue' import Router from 'vue-router' import Index from '@/pages/index' import Home from "@/pages/home" import Artists from "@/pages/artists" import ListCate from "@/pages/listcate" import Ucenter from "@/pages/ucenter" import Search from "@/pages/search" import HotList from "@/pages/musiclist/hot_list" import KingList from "@/pages/musiclist/king_list" import NewsList from "@/pages/musiclist/news_list" Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Index',redirect:"/home",component: Index,children:[{path: 'home',component: Home,redirect:"/home/hot",children:[{path:"hot",component:HotList},{path:"king",component:KingList},{path:"news",component:NewsList}]},{path:"artists",component:Artists},{path:"listcate",component:ListCate},{path:"ucenter",component:Ucenter},{path:"search",component:Search}]}] })

添加緩存

為了防止每次點擊榜單都要重新加載數據，配置緩存

在home.vue中

?

<keep-alive><router-view /></keep-alive>

這樣，只有第一次加載，后面再點擊就不會再加載了。

?

講解

?

1.在home.vue頁面有引入了music_listnav.vue導航組件，在導航組件中通過router-link以及index.js中的配置實現路由跳轉到三個榜單組件。

2.在三大榜單組件中，引入了 公共組件

通過? <MusicList :url= "url"/>給引用的組件 傳遞一個參數url，而這個參數在

export default {data(){return{url:"要賦值的參數"<BR>??? }

給參數賦值。

?

3.公共組件接受參數

?

在公共組件中通過：

? props:{url:{type:String,default:""}

來接受傳遞的參數。

然后將接受的參數作為請求數據的url來請求不同的數據

? mounted(){const httpUrl = this.HOST+this.url;this.$axios.get(httpUrl).then(res => {this.currentData = res.data.song_list}).catch(error => {console.log(error);})}

最終效果

此部分代碼對應分階段代碼中階段四

分階段代碼下載位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557

總結

以上是生活随笔為你收集整理的Vue实现仿音乐播放器7-实现音乐榜单效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。