歌手到歌手詳情頁

配置路由

  1. 建立並編寫簡單的頁面singer-detail.vue
  2. 在歌手組件中添加<router-view></router-view> <!-- 掛載歌手詳情頁的路由-->
  3. 在index.js中從新配置路由,點擊歌手就能夠轉到詳情列表了
{
          path: '/singer',
          component: Singer,
          children: [
            {
              path: ':id',
              component: SingerDetail
            }
          ]
        }

添加方法完成跳轉

在歌手頁面listview.vue頁面中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){app

this.$router.push({
        path: `/singer/${item}`
      })
      console.log(item);
    },

最終效果:點擊歌手欄就能實現從歌手頁面跳轉到歌手詳情頁this

相關文章
相關標籤/搜索