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等。