创建页面: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里面