Vue音乐--搜索页面07_点击歌手

大概步骤：

目标效果

---

七、点击歌手li

• 要点：
  • 点击歌手，跳转到路由歌手详情页
  • 歌手详情页的数据设置了从vuex中获取
  • 所以点击同时把歌手数据传递到vuex中

（一）、配置子路由和点击跳转

↓router- ->index.js

{
      path: '/search',
      name: 'Search',
      component: Search,
      children:[{
        path: '/search/:id',
        name: 'SearchDetail',
        component: SingerDetail,
      }]
    }

↓SearchSuggest.vue
创建类的方法，把数据创建成一个对象
这里需要用到的歌手数据是歌手名，歌手id和歌手图片id（注意和教程视频的id不一样）

import Singer from '@/common/js/singer' //引入歌手数据提取方法类

/*****跳转路由，歌手详情页*********/
  selectItem(item){
    //判断是歌手，并把歌手数据提取出出来
    if(item.type===TYPE_SINGER){
      const singer = new Singer({
        id:item.singerid,
        mid:item.singermid,
        name:item.singername
      })
		this.$router.push({
       	 path:`/search/${this.singer.id}`
     	 })   
   	}

↓Singer.js

export default class Singer {
  constructor({id, name,mid}) {
    this.id = id
    this.mid = mid
    this.name = name
    this.avatar = `https://y.gtimg.cn/music/photo_new/T001R300x300M000${mid}.jpg?max_age=2592000`
  }
}

（二）、把用类处理后的歌手对象存入vuex

↓store- ->state.js
查看vuex，发现在歌手页面已经配置了singer对象vuex
所以，直接调用mutations来存入即可

import {mapMutations} from 'vuex' //引入点击存入数据方法的vuex

...mapMutations({
      setSinger:'SET_SINGER'
    }),

//把点击的数据存入vuex自动渲染入歌手详情页
      this.setSinger(singer)

• 图片src需要跨域才能获取

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com