共计 453 个字符,预计需要花费 2 分钟才能阅读完成。
配置路由
- 创建并编写简单的页面 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);
},
最终效果:点击歌手栏就能实现从歌手页面跳转到歌手详情页
正文完
发表至:无分类
2019-11-15