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 ，也可掃碼，希望能幫助到大家。