Vue2.0 Vuex初始化及歌手数据的配置 | 音乐 WebApp （七）

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

授权许可

0 系列文章目录

01 Vue2.0 定制一款属于自己的音乐 WebApp
02 Vue2.0 路由配置及Tab组件开发
03 Vue2.0 数据抓取及Swiper组件开发
04 Vue2.0 scroll 组件的抽象和应用
05 Vue2.0 歌手数据获取及排序
06 Vue2.0 歌手列表滚动及右侧快速入口实现
07 Vue2.0 Vuex初始化及歌手数据的配置

1 子路由配置

通过歌手列表页而进入歌手详情页，我们这里需要写一个详情页的组件，并将该组件挂载到列表页的子路由下面，并且在 Singer 组件中创建一个 来承载子路由，路由跳转我们写在 listview 组件中，给每一个列表项添加一个点击事件，基础组件里不写业务逻辑，只负责派发事件

// components/singer-detail/singer-detail.vue

// router/index.js

import SingerDetail from 'components/singer-detail/singer-detail'

export default new Router({
  routes: [
    ...
    {
      path: '/singer',
      component: Singer,
      children: [
        {
          path: ':id',
          component: SingerDetail
        }
      ]
    }
  ]
})

// singer.vue

// listview.vue

从 listview 组件中派发出来的 Singer 类，获取其歌手 id 拼接至子路由路径

// singer.vue

// singer-detail.vue

运行结果

在控制台中，Vuex 提供的 log 还能帮助我们查看数据的变化

log 打印

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Vue_Music_07 上了，有需要的同学可自行下载

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为优秀作者献上一发助攻吧，谢谢！^ ^