Vue通过id跳转到商品详情页

时间:2023-03-09 09:22:09
Vue通过id跳转到商品详情页

方法一:通过

<router-link :to="">我要跳转,别拦我</router-link>

首页列表:

在这里我用a标签进行跳转,在vue里面使用<router-link></router-link>

<router-link :to="{path:'/news',query:{ id:item.NewsID }}" class="around"></router-link>

商品详情页:

//请求接口
created: function() {
var newsID=this.$route.query.id;
this.$http.get(this.$store.state.index.ip + '/api/News/'+newsID).then((response) => {
console.log(response);
}).catch(function(error) {
console.log(error);
});
}

方法二:通过绑定点击事件跳转页面(比较常用,纯手写,有啥问题,欢迎加群讨论!)

 <ul>
<li v-for="(item,index) in items" :key="index" @click="jumpPage(item.id)">我要跳转谁也别拦我</li>
</ul> data(){
return:{
items:[
{
id:1
},
{
id:2
},
{
id:3
}
]
}
},
methods: {
jumpPage(id) {
this.$router.push({
path: '路由地址',
query: {
id: id
}
})
},
}

若有不明白请加群号:复制 695182980 ,也可扫码,希望能帮助到大家。

Vue通过id跳转到商品详情页