Vue模拟数据，实现路由进入商品详情页面

Vue模拟数据，实现路由进入商品详情页面

一、路由

首先需要配置路由，就是点击good组件进入goodDetail组件
配置路由如下

 {
     path: '/goodDetail',
     component:goodDetail
 }

同时在good组件中写入如下点击事件，路由中加入查询参数，也就是商品的id

//点击路由到商品详细信息页
      selectGood(){
        router.push({
          path: 'goodDetail',
          query:{goodId:this.goodDetail.id}})
      }

二、在goodDetail组件中接收路由参数

goodDetail中的代码如下

export default{
    data(){
      return {
        id: this.$route.query.goodId,
        loading: false,
        selectedGood: []
      }
    },

    created(){
      this.fetchData();
    },

    methods:{
      fetchData(){
        this.loading = true;

        //拿到查询字段，商品的id后进行http请求
        var id = this.id;
        this.$http.get('/api/goods/' + id)
          .then(response => {
            this.selectedGood = response.data.data;
          }, error => {
            console.log(error);
          })

        this.loading = false;
      }
    }
  }

可以看到我这里接收到路由参数的中的商品id后，发送了一个http请求，这时就需要本地mock数据

三、本地模拟数据

首先需要有一个data.json用来存放模拟的数据，然后配置build目录下的dev-server.js如下

//获取mock数据
var appData = require('../data.json');
var goods = appData.goods;

var apiRoutes = express.Router();

apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  });
})

//拿到指定id的商品信息
apiRoutes.get('/goods/:id', function(req, res) {
  var id = req.params.id;
  function selectedGood(id){
    for(var i = 0; i < goods.length; i++) {
      if(goods[i].id == id){
        return goods[i];
      }
    }
  }
  var good = selectedGood(id);
  res.json({
    errno: 0,
    // data: goods[req.params.id]
    data: good
  });
})

app.use('/api', apiRoutes);