zoukankan      html  css  js  c++  java
  • 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 ,也可扫码,希望能帮助到大家。

                                          

     
  • 相关阅读:
    数据库(六)
    数据库(五)
    数据库(四)
    数据库(三)
    数据库(二)
    数据库
    函数 枚举和递归
    数据类型(四) 集合
    数据库基础
    特殊集合 结构体
  • 原文地址:https://www.cnblogs.com/CinderellaStory/p/9985812.html
Copyright © 2011-2022 走看看