admin 管理员组

文章数量: 1086058

Vue音乐

大概步骤：

目标效果

七、点击歌手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 = idthis.mid = midthis.name = namethis.avatar = `${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

本文标签： Vue音乐

版权声明：本文标题：Vue音乐 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1693759891a241201.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。