vue慕课网音乐项目手记：37-歌单详情页开发

创建页面：disc–>disc.vue

二级路由的设置：

{
      path: '/singer',
      component: Singer,
      children: [
        {
          path: ':id',
          component: SingerDetail
        }
      ]
    },

注意上面是component，不是components

在recommend组件添加router-view。

为li添加点击事件：

<li class="item" v-for="item of discList" :key="item.dissid" @click="selectItem(item)">

selectItem (item) {
      this.$router.push({
        path: `/recommend/${item.dissid}`
      })
      this.setDisc(item)
    },

通过vuex传递数据

disc: {}

export const SET_DISC = 'SET_DISC'

[types.SET_DISC] (state, disc) {
    state.disc = disc
  }

export const disc = state => state.disc

在recommend里面改变state里面的disc

...mapMutations({
      setDisc: 'SET_DISC'
    })

this.setDisc(item)

在子组件里面去接收

...mapGetters([
      'disc'
    ])

name () {
      return this.disc.dissname
    },
    bgImage () {
      return this.disc.imgurl
    },

然后传递数据就可以了。

获取数据在computed里面。 设置数据在methods里面