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);