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); }); }

 

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

 1 <ul>
 2    <li v-for="(item,index) in items" :key="index" @click="jumpPage(item.id)">我要跳转谁也别拦我</li>
 3 </ul>
 4 
 5 data(){
 6     return:{
 7         items:[
 8         {
 9            id:1
10          },
11         {
12            id:2
13          },
14         {
15            id:3
16          }
17       ]
18    }
19 },
20   methods: {
21    jumpPage(id) {
22       this.$router.push({
23         path: '路由地址',
24         query: {
25           id: id
26         }
27       })
28     },
29 }     

 

 

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

                                      

 
打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM