1.准备好歌手详情业务组件
<template>
<transition name="slide">
<music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
</transition>
</template>
2.配置路由
const SingerDetail = (resolve) => {
import('components/singer-detail/singer-detail').then((module) => {
resolve(module)
})
}
{
path: '/singer',
component: Singer,
children: [
{
path: ':id',
component: SingerDetail
}
]
},
3.到listView把点击事件派发出去外部就知道点击的元素是什么,不做业务逻辑
<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>
selectItem(item) {
this.$emit('select', item)
},
4.在singer.vue中监听listView的点击事件
selectSinger回调函数
<list-view @select="selectSinger" :data="singers" ref="list"></list-view>
selectSinger(singer) {
this.$router.push({
path: `/singer/${singer.id}`
})
this.setSinger(singer)
},
5.singer.api
6.singer-detail
computed: {
title() {
return this.singer.name
},
bgImage() {
return this.singer.avatar
},
...mapGetters([
'singer'
])
},
created() {
this._getDetail()
},
methods: {
_getDetail() {
if (!this.singer.id) {
this.$router.push('/singer')
return
}
getSingerDetail(this.singer.id).then((res) => {
if (res.code === ERR_OK) {
this.songs = this._normalizeSongs(res.data.list)
}
})
},
7.动画
<transition name="slide">
<music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
</transition>
<style scoped lang="stylus" rel="stylesheet/stylus">
.slide-enter-active, .slide-leave-active
transition: all 0.3s
.slide-enter, .slide-leave-to
transform: translate3d(100%, 0, 0)
</style>