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