Vue模拟数据,实现路由进入商品详情页面的示例

发布时间：2020-12-17 02:11:20 所属栏目：百科来源：网络整理

导读：一、路由首先需要配置路由，就是点击good组件进入goodDetail组件配置路由如下同时在good组件中写入如下点击事件，路由中加入查询参数，也就是商品的id 二、在goodDetail组件中接收路由参数 goodDetail中的代码如下 //拿到查询字段，商品的id后进行http请

一、路由

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

配置路由如下

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

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

goodDetail中的代码如下

//拿到查询字段，商品的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如下

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

以上这篇Vue模拟数据,实现路由进入商品详情页面的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!