歌手到歌手详情页

43次阅读

共计 453 个字符,预计需要花费 2 分钟才能阅读完成。

配置路由

  1. 创建并编写简单的页面 singer-detail.vue
  2. 在歌手组件中添加 <router-view></router-view> <!– 挂载歌手详情页的路由 –>
  3. 在 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);
    },            
            
    

最终效果:点击歌手栏就能实现从歌手页面跳转到歌手详情页

正文完
 0