从遍历出的列表里跳转对应的详情

template中

<div v-for="(item,index) in list" :key="index">
     <p>{{ item.pigId }}</p>
     <p>{{ item.pigName }}</p>
</div>

script中

data() {
    return {
      list: []
    }
  },

通过接口获取列表先:

//在created里自动提前加载列表
created(){
    this.axios.get('列表的接口地址').then((res) => {
        console.log(res)
        this.list = res.data  //把res.data里的数据渲染到页面列表
  })
}

有列表之后点击跳转相应详情 使用query传参的方式 首先要清楚应该拿哪个参数(字段)去传 比如拿pigId传给详情页

<div v-for="(item,index) in list" :key="index">
     <p>{{ item.pigId }}</p>
     <p>{{ item.pigName }}</p>
     <button @click="toInfo(item.pigId)">详情</button>
</div>

//传参
methods:{
  toInfo(pigId){
    this.$router.push({
        path:'',  //往哪跳
        query: {
            pigId : pigId  //参数
        }
    })
  }
}

//详情页获取参数
created:{
    this.id = this.$route.query.pigId
    console.log(this.id)
}