場景

音樂榜單下有個導航頁面組件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;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><script>import MusicList from "../../components/Music_List"export default {data(){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>.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的子路由。

?

講解

?

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

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

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

給參數賦值。

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

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);})}

最終效果

總結

以上是生活随笔為你收集整理的实例入手Vue-Route给引用组件传值以及实现组件重用的全部內容，希望文章能夠幫你解決所遇到的問題。

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