- 在页面需要点击的div设置router-link属性跳转页面,其中query负责传参数,我这里传的是咨询的id
<router-link
:key="item.id"
:to="{ path: '/detail', query: {info_id: item.id } }"
v-for="item in List"
>
<div>
<img :src="item.img" />
</div>
</router-link>
2.在点击后进入详情页面,请求接口api中写好给后端传的id
//咨询详情
export const getXiangqin = (vid)=> axios.get("/api/v1/pub/item/getImgById",{
params: {
info_id:vid
}
})
3.然后在咨询详情页面发起请求即可
import { getVideoDetail } from "@/api/getData.js";
export default {
data(){
return {
//视频信息
videoInfo:[],
}
},
methods:{
//获取视频详情
async getDetail(vid){
try{
const result = await getVideoDetail(vid)
if(result.data.code == 0){
this.videoList = result.data.data;
}
this.chapterList = chapterList;
}
}catch(error){
console.log(error)
}
}
},
mounted(){
//渲染完成后拿到相应的数据
console.log(this.$route.query.info_id)
this.getDetail(this.$route.query.info_id);
}
}