vuejs开发音乐播放器（二）：从歌手页面到歌手详情页面的子路由跳转

1、先引入singer_detail.vue文件,再配置子路由

router/index.js

//import the singer_detail.vue
import SingerDetail from 'components/singer-detail/singer-detail'

//set the route 
export default new Router({
  routes: [
    {
      path: '/singer',
      component: Singer,
      children: [
        {
          path: ':id',
          component: SingerDetail
        }
      ]
    }
  ]
})

2、先说明下，listview是singer引入的基础组件，listview中存放的是歌手列表，因此要给listview中的歌手列表绑定一个点击事件，由于listview是基础组件，因此没有外部逻辑，它要做的是把这个点击事件使用$emit派发出去，让singer接收。 listview.vue

//bind click
<li @click="selectItem(item)" v-for="item in group.items" class="list-group-item">
          <img class="avatar" v-lazy="item.avatar">
          <span class="name">{{item.name}}</span>
</li>

//emit to singer.vue
methods: {
          selectItem(item) {
            this.$emit('select', item)
          }
      }

3、singer.vue接收listview.vue派发的时间和参数，并挂载二级路由

singer.vue

<div class="singer">
    <listview @select="selectSinger" :data="singers"></listview>
    <router-view></router-view>
</div>

//push
methods: {
    selectSinger(singer) {
      this.$router.push({
        path: `/singer/${singer.id}`
      })
    }
}