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

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

文章题目：Vue模拟数据,实现路由进入商品详情页面的示例
文章来源：https://www.cdcxhl.com/article30/gcospo.html

成都网站建设公司_创新互联，为您提供建站公司、网站维护、网站排名、品牌网站建设、响应式网站、网站导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容