配置路由
- 创建并编写简单的页面singer-detail.vue
- 在歌手组件中添加<router-view></router-view> <!-- 挂载歌手详情页的路由-->
- 在index.js中重新配置路由,点击歌手就可以转到详情列表了
{
path: '/singer',
component: Singer,
children: [
{
path: ':id',
component: SingerDetail
}
]
}
添加方法完成跳转
在歌手页面listview.vue页面中
<div class="singer-wrapper border-bottom"
v-for="(des,index) in item.items"
:key="des.id"
@click.stop.prevent="selectItem(des.id)"
>
selectItem(item){
this.$router.push({
path: `/singer/${item}`
})
console.log(item);
},
最终效果:点击歌手栏就能实现从歌手页面跳转到歌手详情页
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。