vue饿了么学习-第十篇（配置路由）

1.在build文件下，打开dev-server.js文件，添加引入express文件，并使用它。

var express = require('express')

var app = express()

2.在vuezhong饿了么学习-第六篇（mock数据）中，

已经将data.json数据，引入到了这里，如下

//9.5 定义数据读取,引入全部数据，并分类赋给seller，goods,ratings
var appDate = require('../data.json');
var seller = appDate.seller;
var goods = appDate.goods;
var ratings = appDate.ratings;

现在需要吧上面三个数据，seller，goods，ratings分别配置到不同的路由中去，

//把上面的三个数据，交给不同的路由下面的data，前端请求的时候接收到的res，就是这里配置好了的对应data；
var apiRoutes = express.Router();
apiRoutes.get('/seller',function (req, res) {
  res.json({
    errno: 0,
    data: seller
  })
})

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

apiRoutes.get('/ratings',function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  })
})
app.use('/api', apiRoutes)

代码如上，结尾不要忘了最后一句（路由端口的配置就完成了）

3.前端页面的写法，（打开App.vue），创建一个cteated函数，如下

created () {
  this.$http.get('/api/seller').then( (res) => {
  //这里请求的是seller路由，接收的是dev-server.js下面配置好的seller的data，可以在浏览器network中查看是否请求到了seller文件资源
    res = res.body
    //errno是路由配置的请求成功参数，成功后则把数据数据返给vue实例中的seller
    if(res.errno === ERR_OK) {
        this.seller = res.data
      console.log(this.seller)

    }
  })
},

上面是请求的seller路由下的数据，要请求goods，ratings路由下的数据，只需要修改 ‘/api/seller’ 后面的seller为goods等。