场景

音乐榜单下有个导航页面组件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);
      })
  }

最终效果