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

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

//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派发的时间和参数，并挂载二级路由

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