vue 傳參數(shù)的問題

現(xiàn)在有一個需求是這樣的，點擊商品列表的一個商品（圖1），會獲取商品的id，然后傳入商品詳細信息界面（圖2），然后商品詳細信息界面接收到商品的id之后，根據(jù)這個id向數(shù)據(jù)庫發(fā)出http請求，從而請求出數(shù)據(jù)，然后把對應的商品name，商品image，商品price都取出來，從而實現(xiàn)圖2的樣式。

圖1

圖2

我用的是vue，vue-router，上網(wǎng)也找了一些資料，但是對于根據(jù)商品id向數(shù)據(jù)庫進行請求數(shù)據(jù)不太明白。我是做前端開發(fā)的，所以想模擬一個數(shù)據(jù)庫，參考了這個Vue模擬數(shù)據(jù)，實現(xiàn)路由進入商品詳情頁面資料，但是看的不是太懂，具體不知道怎么寫，寫一個簡單的例子也行，大神們幫我看一下怎么寫這個需求，謝謝

回答

編輯回答

乖乖噠

根據(jù)商品id向數(shù)據(jù)庫進行請求數(shù)據(jù)

意思就是向后端發(fā)送http請求嘛

axios.get('/api/goods/' + id)
    .then(response => {
        //后端返回給你商品數(shù)據(jù)
    })

2017年5月26日 07:25

編輯回答

尐潴豬

列表頁部分

<template>
  <div>
      <li v-for="item in list" :key="item.goods_id">
          <router-link :to="{name: 'goods_detail', query: {goods_id: item.goods_id }}">
              <div>
                  <img src="" alt="">
                  <span></span>
              </div>
          </router-link>
      </li>
  </div>
</template>

詳情頁接受goods_id部分JS

<script>
export default {
  computed:{
      goods_id: function(){
          return this.$route.query.goods_id//這個就是頁面URL上的goods_id
      }
  }
}
</script>

拿到了goods_id就可以進行Http請求商品數(shù)據(jù)了，如果哪里不明白的可以提出來。

2018年7月31日 10:26

編輯回答

淺淺

你應該看了v-router了吧，了解了編程式導航，如何從url中獲取參數(shù)。根據(jù)ID請求數(shù)據(jù)是指你使用ajax或者axios向后臺給你的某個接口發(fā)送請求的同時傳入這個ID，然后返回什么數(shù)據(jù)由后臺根據(jù)ID篩選，然后你得到數(shù)據(jù)寫到頁面上。模擬的話可以自己寫個json數(shù)據(jù)，然后根據(jù)根據(jù)id匹配到數(shù)據(jù)。for循環(huán)。如截圖，你可以寫在一個json文件中，或者直接在js里面也行。要注意json對格式要求嚴格，如果有什么格式不對的都會報錯。

2018年1月18日 01:30