• 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 ,也可扫码,希望能帮助到大家。

                                          

     
  • 相关阅读:
    三毛
    深复制和浅复制
    并发和并行
    PhotoKit保存图片到相册
    利用代码块
    Maven打包程序
    通过Nginx+Tomcat简单实现发布时不间断服务的提供
    C# java MD5加密方不一致问题
    SpringBoot读取配置值的方式
    Java8之集合排序
  • 原文地址:https://www.cnblogs.com/CinderellaStory/p/9985812.html
Copyright © 2020-2023  润新知