singer页面点击歌手singer是跳转到singer-detail的设置

1.创建components/singer-detail/singer-detail.vue

2.配置动态路由：

 {
          path: ':id',
          name:'singer-detail',
          component:()=>import('@/components/singer-detail/singer-detail.vue')
        }

3.在listview.vue中emitselectSinger事件来触发选择明星，并将选择的明星item作为参数派发给singer.vue

 seletSinger(singerName){
        this.$emit('selectSinger',singerName)
      },

4.singer中监听派发的selectsinger事件，并设置路由跳转；

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

5.给singer.vue中添加<router-view></router-view>来显示子组件singer-detail.vue的内容；因为会将父子组件一起显示，为了只显示子组件，给singer-detail.vue添加样式：

.singer-detail{
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #222;
}

 5.给在切换到歌手详情页的时候添加动画：在singer-detail.vue最外层包<transition></transition>并设置样式：

  .slide-enter-active, .slide-leave-active {
    transition: all 0.3s

  }
  .slide-enter, .slide-leave-to {

    transform: translate3d(100%, 0, 0)
  }