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