vue 传参数的问题

Question

现在有一个需求是这样的，点击商品列表的一个商品（图1），会获取商品的id，然后传入商品详细信息界面（图2），然后商品详细信息界面接收到商品的id之后，根据这个id向数据库发出http请求，从而请求出数据，然后把对应的商品name，商品image，商品price都取出来，从而实现图2的样式。

图1

图2

我用的是vue，vue-router，上网也找了一些资料，但是对于根据商品id向数据库进行请求数据不太明白。我是做前端开发的，所以想模拟一个数据库，参考了这个Vue模拟数据，实现路由进入商品详情页面资料，但是看的不是太懂，具体不知道怎么写，写一个简单的例子也行，大神们帮我看一下怎么写这个需求，谢谢

Answer 1

你应该看了v-router了吧，了解了编程式导航，如何从url中获取参数。根据ID请求数据是指你使用ajax或者axios向后台给你的某个接口发送请求的同时传入这个ID，然后返回什么数据由后台根据ID筛选，然后你得到数据写到页面上。模拟的话可以自己写个json数据，然后根据根据id匹配到数据。for循环。如截图，你可以写在一个json文件中，或者直接在js里面也行。要注意json对格式要求严格，如果有什么格式不对的都会报错。

Answer 2

列表页部分

<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请求商品数据了，如果哪里不明白的可以提出来。

Answer 3

根据商品id向数据库进行请求数据

意思就是向后端发送http请求嘛

axios.get('/api/goods/' + id)
    .then(response => {
        //后端返回给你商品数据
    })